React でTODOリストを開発しているのですが、
今回は、Reduxを導入してみました。
Redux を導入することで、stateをRedux で管理することができるようになります。
メリットとしては、どのコンポーネントも、このRedux で管理されたstate を参照するようになるので、統一した値を参照することができるようになり、
コンポーネント同士のバケツリレーをする必要がなくなるのですね。
vue.js だったら、vuex ってのを使用しますし、
reactだったら、redux
JSのフレームワークを触るなら、このあたりの知識は必須かなと思っております。
今回は、Reduxにstateを更新できるところまで実装できたらいいかな
ということで、早速実装していく！
index.js
import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import App from "./App";
let nextId = 1;
//action
const addTodo = text => ({
type: "ADD_TODO",
id: nextId++,
todo: text
});
//reducer
const reducer = (state = [], action) => {
switch (action.type) {
case "ADD_TODO":
return [
...state,
{
id: action.id,
todo: action.todo
}
];
default:
return state;
}
};
const store = createStore(reducer);
//stateに変更があったら参照できる
store.subscribe(() => {
console.log(store.getState());
});
//dispatch
store.dispatch(addTodo("test"));
redux を使用する上で重要なのは、
dispatch, action, reducer の考え方
dispatch はaction を呼ぶ
action はreducer を呼ぶ関数
reducer で、reduxで管理しているstate更新
というようなイメージです。
この役割を理解できれば、
あとは、書き方を覚えるだけかな
初見はめちゃ難しく感じるかもですが、
慣れてくると、けっこうシンプルに理解できるようになる気がします。
実際に実務で使用するまでは、ちゃんと理解することはできなさそうだけど
次回は、Reduxに管理したstate をブラウザに表示するところまで実装してみようと思います！