useReducer反应法

Question

我在玩useReducer react的api，想知道理论(文档)部分和我实现的部分之间的区别。

intialState of useReducer hook:

const [fields, dispatch] = React.useReducer(formReducer, {
        firstName: { value: '', isValid: false },
        lastName: { value: '', isValid: false },
    });

理论变体

 const formActionTypes = {
    firstName: 'FIRST_NAME',
    lastName: 'LAST_NAME',
};
....
function formReducer(state, action) {
   switch (action.type) {
    case formActionTypes.firstName:
        return { ...state, firstName: { ...action.payload } };
    case formActionTypes.lastName:
        return { ...state, lastName: { ...action.payload } };
    default:
        return state;
}
}
....
dispatch({
            type: formActionTypes[name], //name is input name
            payload: { value, isValid } //value is e.target.value
        });

我的恳求

function formReducer(state, action) {
    return { ...state, [action.name]: { ...action.payload } };
}
 ....
    dispatch({
                name, //name is input name
                payload: { value, isValid } //value is e.target.value
            });

Answer 1

如果你问的是这两个减速机，那么这两种减速器都会起作用，并产生相同的效果。我认为您从文档中获得的理论版本是为了演示一个特定的概念，但是您的还原器可以说违反了这个概念(尽管这不是什么大事；我们的工作是编写工作代码，而不是通过某种纯度测试！)

具体来说，您通常希望在某种程度上将操作与状态分离。操作不应该仅仅是状态数据结构的镜像；如果需要这种耦合，您最好使用useState，直接设置状态。还原器是通过对动作的描述建模来将其解耦，然后只有还原器才能决定该动作对状态的作用方式。例如，您可能决定添加一个清晰的表单按钮。使用当前的模式，您必须分派两个操作，这将导致两个状态更新，因为您的操作对状态进行了严密的建模。开关语句模式允许您根据不同类型的操作轻松地应用不同类型的逻辑。

没有错误的答案，只有不同的方法都有各自的优点。我认为，通过让还原器逻辑负责了解字段是否有效，这里引入了更好的解耦：

const SET_FIRST_NAME = Symbol();
const SET_LAST_NAME = Symbol();
const CLEAR_FORM = Symbol();

// Call action creators instead, like: dispatch(setFirstName(e.target.value));
const setFirstName = name => { type: SET_FIRST_NAME, value: name };
const setLastName = name => { type: SET_LAST_NAME, value: name };
const clearForm = () => { type: CLEAR_FORM };

const initialState = {
  firstName: { value: '', isValid: false },
  lastName: { value: '', isValid: false }
};

const notEmpty = value => !!(value && value.trim().length);

const validateFirstName = notEmpty; // Or replace with different logic
const validateLastName = notEmpty;

const reducer = (state, action) => {
  switch (action.type) {
    case SET_FIRST_NAME:
      return { 
        ...state, 
        firstName: {
          value: action.value, 
          isValid: validateFirstName(value) 
        } 
      }
    case SET_LAST_NAME:
      return { 
        ...state, 
        lastName: {
          value: action.value, 
          isValid: validateLastName(value) 
        } 
      }
    case CLEAR_FORM:
      return initialState;
    default:
      return state;
  }
};