Reduxの基本的使い方(脳死)

前提知識

なぜReduxを使いたいのか？

コンポーネント間でのstateではなくフロント側全体のコンポーネントからアクセスできるグローバルな状態を定義したい！

Reac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト

ReactのReduxを理解するのは難しいと言われています。確かいろいろな用語が出てくることもありVue.jsのVuexに比べてわかりにくいと思います。しかし一度覚えてしまえば基本的な概念は難しくはないので最初は大変ですが、頑張って読み進めてください。

https://reffect.co.jp

Reduxの使い方

1. store配下に〇〇Slice.tsを新規作成

2. 〇〇Slice.ts内でstateの型、initialState、Sliceを作成

参考コード
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { ×× } from "../models/××";

export type 〇〇State = {
  state名?: xx(型) ;
};

export const initialState: 〇〇State = {}; //stateを空で初期化する

export const 〇〇Slice = createSlice({
  name: "〇〇",
  initialState,
  reducers: {
    //引数に受け取ったものをstateに代入する簡単なaction例
    set+state名: (state, action: PayloadAction<{ 引数: xx(型) }>) => {
      state.state名 = action.payload.引数;
    },
  },
});

export default 〇〇Slice.reducer;

3. actionの使い方


- 使いたいコンポーネント内でdispatchを宣言
const dispatch = useAppDispatch();
- stateを変化させたい箇所でdispatch()を呼び出す
onClick={() => {
        dispatch(actions.set+state名({ 引数 })));
      }}

4. stateの呼び出し方

グローバルなsteateを呼び出したいコンポーネント内useAppSelectorを使用して呼び出す
const { state名 } = useAppSelector((state) => state.state名);