CODEWITHSUNDEEP
javascriptreactjsreduxredux-actionsredux-reducers
twolsh
twolsh

Reputation: 11

React redux - pushed object in the state is not mapped but initialState is

I am working on some app where you can save a note about a video. I have some redux issues, sorry that I am not specific but I don't know where the problem is. Every time when I am using 'ADD_ITEM' action, everything works fine in the devtools I can see that values are in the state, but they are not mapped, and only initial values of state are mapped.

This sounds really weird. For adding content to my app I am using Formik, so maybe the issue is in my form? Here is the video how the issue looks:

https://user-images.githubusercontent.com/69200598/113505397-d9d41d00-953e-11eb-8e39-ccc60b4ce2cd.mp4

Incidentally, don't try to understand me on this video, I am Polish :)

Here is my initial state that is actually mapped:

const initialState = {
  saves: [
    {
      id: 1,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHh-kU',
      content: 'Nowy film gargamela!',
    },
    {
      id: 2,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHa-kU',
      content: 'Nowy film!',
    },
    {
      id: 5,
      title: 'cos',
      created: 'cos',
      link: 'cos',
      content: 'cos',
    },
  ],
};

Here is my reducer:

switch (action.type) { 
   case 'ADD_ITEM': return { 
        ...state, 
        state: [...state.saves, action.payload],
   };

Action creator:

export const addItem = (itemContent) => { 
     const getId = () => _${Math.random().toString(36).substr(2, 9)};
     return { type: 'ADD_ITEM', payload: { id: getId(), ...itemContent, }, }; 
};

(addItem is imported as addItemAction in mapDispatchToProps) mapDispatchToProps

const mapDispatchToProps = (dispatch) => ({ 
   addItem: (itemContent) => dispatch(addItemAction(itemContent)), 
});

and the place in formik where on submit everything is pushed into state:

<Formik initialValues={{ title: '', link: '', content: '', created: '' }} onSubmit={(values) => { addItem(values); handleClose(); }} >

Upvotes: 1

Views: 34

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

The problem is that while updating in redux, you are not writing to the correct property. Instead of state you need to update saves property

case 'ADD_ITEM': return { 
    ...state, 
    saves: [...state.saves, action.payload],
};

Upvotes: 2

Related Questions