Reduxの基本的な使い方 例付き

Reduxの基本的な書き方

1 actionの作成

actionは、取り扱いたいデータの概要を書いているイメージ。

 
//reducks/dots/action.jsx
export const ADD_DOT = "ADD_DOT";
export const add_dot = (dot) => {
return {
        type: ADD_DOT,
        payload: dot,
    };
};

※export const ADD_DOT の意味…　type名である"ADD_DOTS"を変数化することで、type名をtypoしたときに、その旨がエラー文にでるようになる。

2 reducerの作成

actionで作ったデータをどう変更したいかを定義しているイメージ

//reducks/dots/reducer.jsx

import * as Actions from "./action";
import initialState from "../store/initialState"; //次に作る

export const DotReducer = (state = initialState, action) => {
    switch (action.type) {
        case Actions.ADD_DOT:
            return [...state, action.payload];
        default:
            return state;
    }
};

3 initialStateの定義

const initialState = []
export default initialState

このinitialStateが、reducerのstateの初期状態になる。

4 Storeの作成

import { createStore as reduxCreateStore, combineReducers } from "redux";
import { DotReducer } from "../dots/reducers";

export default function createStore() {
    return reduxCreateStore(
        combineReducers({
            dots: DotReducer,
        })
);
}

5 Storeの中身を全てで使えるように設定

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";
import App from "./App";
import createStore from "./redux/store/store";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //Redux DevToolsを使うために定義
export const store = createStore(composeEnhancers(applyMiddleware(reduxThunk)));

ReactDOM.render(
    < Provider store={store}>
        < App />
    < /Provider>,
    document.getElementById("root")

これでAppコンポーネントにネストされてるものすべてを含めて、 storeで管理している内容が使えるようになった！！いえい！🎉

6 Actionを使っていく

・actionを使いたいコンポーネントに移動
・useDispatchと、actionをimport
・useDispatchを定義
・actionを使いたいところで「dispatch(アクション名(propsとして渡したいデータ));」

import { useDispatch } from "react-redux";
import { add_dot } from "../../redux/dots/action";

//....

const MiniForm = () => {
    const dispatch = useDispatch();
    const onSubmit = (data) => {
                //...
        });
        dispatch(add_dot(data));
    };
    return (
        < form onSubmit={handleSubmit(onSubmit)}>
        //...
        < /form>
    );
};
export default MiniForm;

これでactionの中に引数に指定したデータ(今回ならdata)が渡る→そのactionに該当するreducerが走る→storeに保管される 、まで行われる

7 Storeに保管されたstateを使う

・useSelectorのimport
・ useSelector((state) => state.dots)を定義。dotsはreducerのexport名（Store参照)
↓
dotというreducerに入っているstateが使えるようになった。
あとは使っていくのみ。(今回はmapで広げる)

import React from "react";
import { useSelector } from "react-redux";

export default function Base() {
    const dots = useSelector((state) => state.dots);
    console.log(dots); //これでstoreからやってきたdotsが見れる！
    return (
        < React.Fragment>
            < Header />
            {dots.map((dot) => {　    //storeからもらってきたdotsを使ってます
                return < Dots dot={dot} />; 
            })}
            //...
            < Footer />
        < /React.Fragment>
    );
}