CODEWITHSUNDEEP
reactjsreduxredux-form
ronen
ronen

Reputation: 1490

Multiple redux-form reducers

Is it possible to create multiple redux-forms reducers? for example I would like the application state to look like this:

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

so basically, is it possible to connect a form component to a specific reducer or always works with a single reducer and only the form names are dynamic?

Upvotes: 1

Views: 1195

Answers (2)

zloctb
zloctb

Reputation: 11177

USE combineReducers or this pattern :

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

Upvotes: -1

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6674

I think it's possible but in such case you have to tell given redux-form decorator where corresponding reducer was mounted. There is a getFormState config property in reduxForm which expects function that according to docs:

..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

So since you can define reducer for given form you can use multiple reducers.

For more details check redux-form reducer and reduxForm decorator,

Upvotes: 2

Related Questions