减少反应冗余操作代码，这是一个糟糕的解决方案

Question

所以我像这样设置了我的操作来更新我的商店。

export const updateUser = (data) => {
    return{
        type: 'UPDATE_USER',
        payload: data
    };
};
const initialState = {
    email: null,
    name: null
};

export default function(state = initialState, action) {
    switch(action.type) {
        case 'UPDATE_USER':
            return Object.assign({}, state, action.payload);
            break;
        default: return state;
    }
}
updateUser({ email: 'new email', name: 'some guys name'});

这是更新我的商店的可行解决方案，还是我应该让我的操作更具体，我并不真正享受 redux 添加到我的项目中的代码量。

Answer 1

redux 操作的基本定义是 { type: 'type', payload: 'payload' } ，所以你的动作创建者很好。

您实际上可以像这样创建一个动作创建者创建者：

const actionsCreatorCreator = (type) => (payload) => ({
  type,
  payload
});
//and create many actions from it
export const updateUser = actionsCreatorCreator('UPDATE_USER');
export const addUser = actionsCreatorCreator('ADD_USER');

您还可以使用动作/化简器

实用程序库，该库提供创建动作的方法和化简器。我过去使用过 redux 操作。

这些是我为减少操作/化简器代码的数量而采用的其他小优化。

注意 - 使用对象静止/扩展需要 Babel 的对象休息扩展转换。

export const updateUser = (payload) => ({ // return the object without a return statement
    type: 'UPDATE_USER',
    payload // shorthand property name
});
const initialState = {
    email: null,
    name: null
};    
export default function(state = initialState, { type, payload }) { // destructure the action
    switch(type) {
        case 'UPDATE_USER':
            return { ...state, ...payload } // use object rest/spread instead of assign
    }
    return state; // return after the switch instead of default
}
updateUser({ email: 'new email', name: 'some guys name'});

Answer 2

我假设您的问题是询问如何具有可以返回任何字段的UPDATE_USER操作，而不是具有单独的UPDATE_USER_NAME和UPDATE_USER_EMAIL操作。 是的，这绝对没问题 - 您绝对不必为表单中的每个字段定义单独的操作类型。

你的行为的命名和意图取决于你 - 做任何你认为最适合你的情况，并使你的代码可维护且更容易理解。

我确实在我的博客文章Idiomatic Redux：The Tao of Redux，Part 2 - Practice and Philosophy中写了一些关于动作语义的相关想法，你可能想通读一下。