CODEWITHSUNDEEP
reduxreact-reduximmer.js
L-R
L-R

Reputation: 418

How do I pass a new key as an array with immer?

Say I have some initial state like

const initialState = {
  loading: false,
  updating: false,
  saving: false,
  data: {},
  error: null
};

And I want add to data as the result of an action but the data I want to add is going to be an array. How do I go about this?

I've tried 

export default produce((draft, action) => {
  switch (action.type) {
    case UPDATE_STATE.SUCCESS:
      draft.data.new_Array.push(action.payload);
      draft.loading = false;
      break;

    default:
  }
}, initialState);

but this errors.

If I start the initial state as

const initialState = {
  loading: false,
  updating: false,
  saving: false,
  data: {
    newArray: []
  },
  error: null
};

any update to the state before I make the array key overwrites the initial state and removes the key. ie

export default produce((draft, action) => {
  switch (action.type) {
    case OTHER_UPDATE_STATE.SUCCESS:
      draft.data = payload.action;
      draft.loading = false;
      break;

    default:
  }
}, initialState);

can anyone help?

Upvotes: 1

Views: 1717

Answers (1)

windmaomao
windmaomao

Reputation: 7680

There's one thing I noticed you'll run into trouble, draft.data.new_Array.push(action.payload);

Make sure you don't modify the existing data structure. The reason is that redux relies on the memory reference of an object, if the object reference doesn't change, it might fool the redux that nothing actually happened in the past.

In your case, i have a feeling that nothing will ever get triggered.

One way to modify the reference is to create an new object, ex.

  return [...data, newElementObject]

Upvotes: 2

Related Questions