Reduxのレデューサーとアクション

前回のレッスンでは、商品を追加するためのフォームを完成させ、 メインページに表示しました。しかし、現在追加されたデータは保存されず、 つまり新しい商品はストア内の既存商品に追加されません。 これを修正しましょう。

まず、商品アプリケーションでファイル productsSlice.jsx を開き、 createSlice の reducer プロパティ内に、 渡された現在の状態とアクションに基づいてストアに商品を追加する productAdded 関数を記述します。 ここで渡されるのは state 全体ではなく、商品を担当する部分のみであることに 注意してください（products スライスはそれのみを知っています）。 新しい商品のオブジェクトは、フォームの保存ボタンが押されたときに ハンドラーによって生成される action オブジェクトの payload プロパティに含まれます。 結果として、レデューサー productAdded は createSlice のコード内で次のようになります：

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

アクションについてはどうでしょうか？ チュートリアルの最初の方で、アクションはアプリケーションで発生した事象を記述する オブジェクトとして表現されるものであることに触れました。 また、次のようなアクションオブジェクトを作成する アクションクリエーター関数を使用できることも話しました：

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

良いニュースは、私たちが使用している createSlice 関数が この作業を代わりに行ってくれることです。 レデューサーを記述すると、この関数は自動的に同じ名前の アクションクリエーターを作成してくれます。 私たちは、コンポーネントで使用するために得られたアクションクリエーターを エクスポートするだけです。 ファイルの最後、レデューサーをエクスポートする前に次のように行いましょう：

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer