Redux Toolkit

2021年9月19日

Redux Toolkitとは（React環境での解説になります）

// テキストで書き出すと以下の様なイメージ
store // Slice全体を管理しているでっかい倉庫（Amazon）
├ book // Sliceの名前で、区分している（区域、フォルダの様なもの）
└ camera //  


// これをもっと階層を掘り下げるとこんな感じでデータが管理されてます。
store
├ book
│ itemList: {
│		{id: 1, name: 'React入門'},
│		{id: 2, name: 'Redux Toolkit入門'},
│	}
└ camera
    itemList: {
        {id: 1, name: 'Nikon D850'},
        {id: 2, name: 'Nikon D800'},
    }

■sliceに書き起こしてみる

// Book.ts
import { createSlice } from "@reduxjs/toolkit";

// 初期値として入れたいデータ
// 本来はAPIで取得したDBのデータを格納するが、ここではダミーを作成して説明
const bookItems = {
    {id: 1, name: 'React入門'},
    {id: 2, name: 'Redux Toolkit入門'},
}

// stateの初期状態（このSliceで扱う全データの初期状態）
// stateとは、データ全体、オブジェクトで、stateを更新するにはreducerを使う。
const initialState = {
  itemList: bookItems
};

// Sliceを生成する
const bookSlice = createSlice({
  name: "book", // Sliceの名前
  initialState, // データの初期状態（上記のinitialStateがここで適応される）
  reducers: {   // データの処理について記述
  // 一旦省略
  }
});

// Reducerをエクスポートする
export default bookSlice.reducer;

// Camera.ts
import { createSlice } from "@reduxjs/toolkit";

const cameraItems = {
    {id: 1, name: 'Nikon D850'},
    {id: 2, name: 'Nikon D800'},
}

const initialState = {
  itemList: cameraItems
};

const cameraSlice = createSlice({
  name: "camera",
  initialState,
  reducers: {
  // 一旦省略
  }
});

// Reducerをエクスポートする
export default cameraSlice.reducer;

■SliceをStoreに読み込む

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";

// それぞれ slice.reducer を default export している前提
import bookReducer from "./book";
import cameraReducer from "./camera";

const reducer = combineReducers({
  book: bookReducer,
  camera: cameraReducer
});

const store = configureStore({ reducer });

export default store;

store
    book:
        itemList: {
            {id: 1, name: 'React入門'},
            {id: 2, name: 'Redux Toolkit入門'},
        }
    camera:
        itemList: {
            {id: 1, name: 'Nikon D850'},
            {id: 2, name: 'Nikon D800'},
        }

ここまでが「データの管理」までのざっくりとしたイメージです。

reducers

// Book.ts
import { createSlice } from "@reduxjs/toolkit";

const bookItems = {
    {id: 1, name: 'React入門'},
    {id: 2, name: 'Redux Toolkit入門'},
}

const initialState = {
  itemList: bookItems
};

const bookSlice = createSlice({
  name: "book",
  initialState,
  reducers: {
  updateItemList: (state, action) => {
		// state.itemListは、initialStateの中のitemListの事をさしています。
		// action.payloadは、state.itemListの中身に対して更新したい内容です。
      state.itemList = action.payload
    }
  }
});

export default bookSlice.reducer;

// useSelectorは、Sliceの中身を読み込むためのもの
// useDispatchは、Sliceのreducrsに処理の実行を依頼するために必要なもの
import { useSelector, useDispatch } from "react-redux";

// Book.tsのreducersを読み込む
import { updateItemList } from "../store/slice/Book";

const Component = () => {
    // dispatchとして定数に設定
  const dispatch = useDispatch();
    // useSelectorを使ってsliceで管理しているデータを読み込む
    const imteList = useSelector((state: RootState) => state.Book)

  const deleteItem = () => {
        // JavaScriptのpop()を使って配列の最後を削除
        itemList.pop()
        // dispatchを使って更新を×
        dispatch(updateItemList(itemList))	
    }

  return (
        <button onClick={deleteItem}>click</button>
  );
}

BookSlice
itemList:
{ 
    {id: 1, name: 'React入門'},
    {id: 2, name: 'Redux Toolkit入門'},
}

{ 
    {id: 1, name: 'React入門'},
}

で「dispatch(updateItemList(itemList))」でSliceのreducersの「updateItemList」が実行されます。

updateItemList: (state, action) => {
    state.itemList = action.payload
}