React-redux-form: action for inserting an item into a collection

[im1dermike]

I understand how I can push or append an item to a collection, but in my use case, I need to insert an item into an array at a specific index. I'm unclear on how to accomplish this in RRF. I'm not sure if I need to create a modelReducer or a formReducer, and the documentation for each of those items I'm finding quite unclear.

[davidkpiano]

dispatch(actions.change('user.friends', (friends) => {
  // update friends (.slice), insert the item, and return it
});

[lstuartfry]

@im1dermike this could be handled the same way you'd want to handle it in Redux: using .slice() and .concat() array methods to create a COPY of the array stored in redux (without changing it directly). Check out this short video by Dan Abramov where he explains how to do this - https://egghead.io/lessons/react-redux-avoiding-array-mutations-with-concat-slice-and-spread

[im1dermike]

@lstuartfry I actually watched this video earlier today. :)

I understand how to write the reducer logic, it's just a matter of where does the reducer exist in RFF. Based on @davidkpiano's comment, I should use the boilerplate action.change(), including the proper reducer logic.

[lstuartfry]

As long as you're initializing the form state and creating your store in a similar fashion to the way it's outlined in the Quick Start section on Github, the actions.change() method should hit the reducer and update your redux store properly.

const initialUser = { name: '' };

const store = createStore(combineForms({ user: initialUser, }));

[im1dermike]

@lstuartfry Thanks. It looks like I'm on my way to successfully implementing @davidkpiano's suggestion using the boilerplate actions.change(). I'm still not clear on what I would use a modelReducer, however.