🐣

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

2020/10/27に公開

JavaScript

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

Reduxとは？

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

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

Redux用語

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

State（状態）

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

Reducer

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

Action

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

Dispatch

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

Store

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

関係図

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

実践

Reduck Toolkitでいきます

インストール

@reduxjs/toolkitとreact-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}>

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

storeのStateを変更

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

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

storeのStateを読み込む

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