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>
	);
}