redux - dispatchに引数を渡す

やりたいこと

• useDispatch()で生成したdispatchに引数を渡す

Componentでdispatchを呼び出す

import React from 'react';
import { useDispatch } from 'react-redux';

const Component= () => {
  const dispatch = useDispatch();

  const handleClick = (event) => {
    const payload = {title: 'title-edit', id: 'data2',};
    dispatch({ type: 'EDIT_DATA' , payload });
  };

  return (
    <>
      {/* JSX */}
      <button type="button" onClick={handleClick}>Button</button>
    </>
  );
};

export default Component;

Reducerで処理

const initialState = {
  datas: [
    {
      title: 'title1', id: 'data1',
    },
    {
      title: 'title2', id: 'data2',
    },
    {
      title: 'title3', id: 'data3',
    },
  ],
}

function rootReducer(state = initialState, action) {
  if (action.type === 'EDIT_DATA') {
    return {
      ...state,
      datas: Object.assign([], state.datas.map((data) => {
        if (data.id === action.payload.id) {
          return { ...data, ...action.payload };
        }
        return data;
      })),
    };
  }

  // 初期表示
  return state;
}

export default rootReducer;

dispatchにはtypeとpayload(引数)を渡して、rootReducerでtypeによって処理を分岐させる。
reducerで使用したい引数はdispatchに渡したpayloadから取り出して、stateを書き換える。

reducerでstateを書き換えるときはstateがイミュータブルであるため注意。