[Redux] Redux Toolkit - createSlice()

4966 ワード

reduxを使用するとステータス管理が容易になりますが、reduceとactionを個別に管理する必要があるため、コード量が増加します.
この記事は、比較的簡単なコードを使用してステータス管理を行うのに役立つRedux-toolkitに関する記事です.
createSliceとは?
createSlice():リスナー関数のオブジェクト、スライス名、初期状態値を受け入れ、アクション作成者とアクションタイプで自動的にスライスリスナーを作成します.

アクションタイプを定義し、アクション総数:Actionsを作成します.js

初期状態、reducer関数:reducersを定義します.js

これらの古いコードは上記の構造を有する.createSliceでは、1つのファイルでactionとreduceを管理できます.
createAction、createReducer関数は内部で使用され、createSliceで宣言されたスライス名(次の例のコードのname部分)に基づいてreduce、action作成者、action typeが自動的に作成されます.
createSliceの使用

// SearchSlice.tsx
import { createSlice } from '@reduxjs/toolkit'

const SearchSlice = createSlice({
    name: "reducers",
    initialState: {
        list: []
    },
    reducers: {
        addToList(state, action) {
            state.list = action.payload
        }
    }
})

// action과 reducer를 export 해줍니다 
export const searchAction = SearchSlice.actions
export const searchReducer = SearchSlice.reducer

// Main.tsx
import {searchAction} from "./components/store/SearchSlice";
import {useDispatch} from "react-redux";

const dispatch = useDispatch();
...

dispatch(searchAction.addToList(response.data));