javascript - React redux - 状態でプッシュされたオブジェクトはマップされていませんが、initialState は

Question

動画に関するメモを保存できるアプリを開発中です。具体的ではないことを申し訳ありませんが、問題がどこにあるのかわかりません。「ADD_ITEM」アクションを使用するたびに、devtools ですべて正常に動作しますが、値が状態にあることがわかりますが、それらはマップされておらず、状態の初期値のみがマップされています。

これは本当に奇妙に聞こえます。アプリにコンテンツを追加するために Formik を使用しているので、問題は私のフォームにあるのでしょうか? 問題がどのように見えるかのビデオは次のとおりです。

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

ちなみに、このビデオで私を理解しようとしないでください。私はポーランド人です :)

実際にマップされている私の初期状態は次のとおりです。

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',
    },
  ],
};

これが私のレデューサーです：

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

アクション作成者:

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

(addItem は mapDispatchToProps の addItemAction としてインポートされます) mapDispatchToProps

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

そして、送信時にすべてが状態にプッシュされるformikの場所：

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