How to modify existing reducer instead of creating an own?

[georgiosd]

I have a cart model:

const initialCart = {
  items: [],
  deliveryType: 'Standard'
}

I also have a reducer and an action to add an item:

const cart = (state = initialCart, action) => {
    switch(action.type) {
        case 'ADD_CART_ITEM':
            let clone = cloneState(state);
            action.item.id = ++nextItemId;
            clone.items = state.items.push(action.item); // immutable.js
            break;
    }

    return state;
}

The problem is that with this reducer declaration, the action never gets called, presumably because it's replaced from the library's own reducer.

const reducer = combineForms({
  recipient: initialRecipient,
  cart
});

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(ReduxThunk)
));

If I instead use this, then there are essentially two models being modified one from my code and another from the library:

const reducer = combineReducers({
  cart,
  forms: combineForms({
    recipient: initialRecipient,
    cart
  })
});

How do I fix this? :(

[georgiosd]

One solution I found is to use your actions instead of defining my own reducer - however, the problem there is that I don't have to change to do custom things, like define an id for each item.

[davidkpiano]

Can you make a reproducible CodePen example? You should be able to use your own reducer and have it work normally.

The problem is that with this reducer declaration, the action never gets called

Which action are you talking about?

[georgiosd]

Basically the question is, when you use the combineForms auto-generated reducers, how can you accept your own reducers for the same model at the same time.

I made due with using actions.push for now but will try to do a codepen soon - meantime if you can give some generic guidance, that'd be great!

[davidkpiano]

Do you mean having RRF somehow recognize that your own ADD_CART_ITEM action is triggering a change on the model, and handling the form state appropriately (which it is not doing right now)?

[georgiosd]

Right :) so in essence being able to add your own actions beyond what actions allows.

[davidkpiano]

That's coming in version 2 - it's not the easiest problem to solve, in any form library, because RRF has no idea what an ADD_CART_ITEM action is 😅

[georgiosd]

Of course, understood :) Do you have an ETA for v2?

What makes it difficult? Couldn't you just take in an array for other reducers before executing your own?

reducer = combineReducers({
foo: createForms(myOwnReducer1, myOwnReducer2)
})

New to ReactJS so forgive me if I'm being naive :)

[davidkpiano]

Couldn't you just take in an array for other reducers before executing your own?

What would this accomplish?

And no, the tricky part is (performantly) doing a diff on slices of state to determine what has change on each state transition.

[georgiosd]

Mmmmm gotcha. My intention was to be able to effect the change I wanted to the model but I forgot that you also have to detect the change so you can update the form.

I look forward to seeing what you come up with :) Great job so far!