多个 redux 形式的减速器

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 装饰器相应的减速器安装在哪里。 reduxForm 中有一个 getFormState 配置属性根据文档需要的功能：

..takes the entire Redux state and returns the state slice which corresponds to where the redux-form reducer was mounted. This functionality is rarely needed, and defaults to assuming that the reducer is mounted under the form key

因此，由于您可以为给定形式定义缩减器，因此您可以使用多个缩减器。

有关详细信息，请查看 redux-form reducer and 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()))

多个 redux 形式的减速器

Multiple redux-form reducers

reactjs

redux

redux-form