记一次hooks代替redux的经历
- 每个组件套用connect,获取props
import { connect } from 'react-redux';
import { HelpStateToProps, HelpDispatchToProps, HelpReducerProps } from '@src/routes/manage/reducers/help/connect';
export default connect(HelpStateToProps, HelpDispatchToProps)();
- hooks改进方法
- 统一入口
import { HelpStateToProps } from '@src/routes/manage/reducers/help/connect';
import { useDispatch, useSelector } from 'react-redux';
import { UpdateFormFiled } from '@src/routes/manage/reducers/help/action';
const useHelpModalFormField = () => {
const { formField } = useSelector(HelpStateToProps);
const dispatch = useDispatch();
const updateFormField = (formFiled: string) => {
dispatch(UpdateFormFiled(formFiled));
};
return [formField, updateFormField];
};
export default useHelpModalFormField;
- 得到相应方法
import useHelpModalFormField from '@src/hooks/help';
const [formField, updateFormField] = useHelpModalFormField()
// 在相应的地方使用formField、updateFormField
# 好处
精简了代码, 耦合性降低
上次更新: 2021/12/19, 18:05:42