多个 redux 形式的 reducer答案

【问题标题】：Multiple redux-form reducers多个 redux 形式的 reducer
【发布时间】：2017-03-08 07:53:33
【问题描述】：

是否可以创建多个 redux-forms reducer？例如，我希望应用程序状态如下所示：

activities: {
    login: {
        form: {
            // ... all login form data
        }
        // ... more login data
    },
    customer: {
        form: {
            // ... all customer form data
        }
        // ... more customer data
    }
}

所以基本上，是否可以将表单组件连接到特定的减速器或始终使用单个减速器并且只有表单名称是动态的？

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

我认为这是可能的，但在这种情况下，您必须告诉给定的 redux-form 装饰器安装了相应的减速器。 reduxForm 中有一个 getFormState 配置属性，它需要根据文档的功能：

..获取整个 Redux 状态并返回状态 slice 对应于 redux-form reducer 的安装位置。这个功能很少需要，并且默认假设减速器安装在表单键下方

因此，由于您可以为给定的表单定义减速器，因此您可以使用多个减速器。

更多详情请查看redux-form reducer和reduxForm decorator，

【讨论】：

【解决方案2】：

使用 combineReducers 或这种模式：

    const recipeReducers  = (recipes , action) =>{   //recipes --- state.recipes
        switch (action.type) {
            case action_type.ADD_RECIPE:{
                return  recipes.concat({name: action.name})
                };
            default:
                return recipes

        }
    }
    const ingredientsReducer = (ingredients, action) =>{
        switch (action.type) {
            case action_type.ADD_INGREDIENT:{
                const newIngredient = {
                    name: action.name,
                    recipe: action.recipe,
                    quantity: action.quantity
                };
                return ingredients.concat(newIngredient)
                };
            default:
                return ingredients
        }
    }


    const reducer = (state={}, action) => {
         return Object.assign({}, state, {
             recipes: recipeReducers(state.recipes, action),
             ingredients: ingredientsReducer(state.ingredients, action)
        });
     };



const initialState = {
         recipes: [
                         {
                             name: 'Omelette'
                        }
                ],
     ingredients: [
                     {
                        recipe: 'Omelette',
                     name: 'Egg',
                     quantity: 2
                 }
     ]
 };



function configureStore(initialState = {}) {
    const store = createStore(
        reducer,
        initialState,
        applyMiddleware(thunk)
    )
    return store;
};
window.store = configureStore(initialState);
store.subscribe(() => console.log(store.getState()))

【讨论】：