Question

是否可以创建多个redux-forms Reducer？例如，我希望应用程序状态看起来像这样：

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

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

Answer 1

我认为这是可能的，但在这种情况下你必须告诉给定的redux-form装饰器安装了相应的reducer。 getFormState中有一个reduxForm配置属性，该属性需要根据docs

的功能

..获取整个Redux状态并返回状态对应于安装还原型还原剂的切片。很少需要此功能，默认为假设 reducer安装在表单键
下

因此，既然您可以为给定的表单定义reducer，则可以使用多个reducer。

有关详情，请查看redux-form reducer和reduxForm decorator，

Answer 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()))

多个还原型还原剂

2 个答案: