Reduxを最低限だけやる【2020年版】

4 min読了の目安(約3700字TECH技術記事

ReactのState管理と言えばReduxですが,なんだか複雑そうで,避けてきました.(このまま逃げたかった...)たまたまプロジェクトで使う機会があったので,最小限のコストで学んだのでここにまとめます.Redux Toolkitというのを使えば,かなり少ないコストで,Reduxを使用することができました.

Reduxとは?

ReactHookのContextAPIのような状態管理のツールです.

今まではRecoilがいいなーと思って使ってましたが,Reduxは古くからあるお偉いさんなので,ご挨拶をしようと思います.

Redux用語

とにかく進出単語が多い.やだ!やりたくない!

State(状態)

保存する情報のこと.状態管理のあれ.

Reducer

状態管理マン.管理するデータごとに作成.(users,messages,logedIn...など)

Action

状態を変更する動作のこと.この辺はToolkit使うと省略できるので,僕はよくわかってません🤤

Dispatch

通信のこと.状態を変更するときに使用するメソッドってイメージですね.

Store

実際に状態が管理されている倉庫.ここですべてのStateを一元管理!呼び出すときもここから!

関係図

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0527df10-ae04-4d07-bc02-df09545b771b/Untitled.png

引用元:https://qiita.com/yutaro-t/items/49bc849db32d76f7ff5c

実践

Reduck Toolkitでいきます

インストール

@reduxjs/toolkitreact-reduxが必要なので,インストールしましょう.

yarn add @reduxjs/toolkit react-redux

※redux本体は@reduxjs/toolkitに含まれる模様.

まずはReduxのファイルを保存するようのフォルダを作りましょう!

名前は,プロジェクトによりますが,今回はmodulesにしてみました.

管理するStateごとにSliceを作成

ほらまたこうやってどんどん進出単語が出てくる.でも,SliceはReduxを簡単に使うための最強のものなんです.こいつだけは好き.

user.js(user情報を保存するStateのファイルとする)

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    name: "でふぉの名前",
    email: "",
}

const userSlice = createSlice({
    name: "user",
    initialState,

    reducers: {
        setUser: (state, action) => {
            return action.payload
            // return Object.assign({}, state, { name: action.payload })
						// returnなしVer.
            //  state.name = action.payload とかピンポイントに変更可
        },
    }
})

export const { setUser } = userSlice.actions
export default userSlice.reducer

ポイント解説

  • action.payloadが引数で取ってきた値となる
  • set関数をactionsとしてexport
  • reducerをdefault exportしておく

Reducerをまとめる

index.js

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
// slice.reducer を default export している場合
import userReducer from "./user";

const reducer = combineReducers({
    user: userReducer,
		// 他にSliceをつくったファイルがあればここに並べて書く
});

const store = configureStore({ reducer });

export default store;

ここでexportするstoreはこのあと使用します!

プロバイダーの作成

StoreのStateを使用したいComponentの親にプロバイダーを設置(App.jsxなどが良い)

import React from "react";
import { Provider } from "react-redux";
import store from "./modules";

function App() {
  return (
    <Provider store={store}>
      <h1>App</h1>
    </Provider>
  );
}

export default App;
  • import { Provider } from "react-redux";
  • import store from "./modules";
  • <Provider store={store}>

Providerstoreをそれぞれimportして流し込むって感じっすね.

storeのStateを変更

  1. import { useDispatch } from "react-redux";
    useDispatchをimport
  2. const dispatch = useDispatch();
    変数化
  3. dispatch(setUser({ 変更するState }));
    引数で別途importしたset関数を使用する.

最後のset関数の引数が更新される値です.

storeのStateを読み込む

  1. import { useSelector } from "react-redux";
    useSelectorをimport
  2. const userInfo = useSelector((state) => state.user);
    useSelectorを使って値を代入.(コールバック関数を引数にしましょう.今回はuserという名前のStateを取得しています.)

Code Sandboxのサンプル

https://codesandbox.io/s/redux-toolkit-lesson-vqiho

【参考文献・参考記事など】

たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita

Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita

HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy