kaede

Posted on May 3, 2022 • Edited on May 5, 2022

React Redux Tutorial Part 4 -- connect API の mapStateToProps を使って Todo アプリを作る

#redux

要件

https://react-redux.js.org/tutorials/connect#connecting-the-components

今回は paylaod に引数を送るだけの action creaters と
動いた actionTypes によって payload から値を受け取ってグローバルステートに変化を与える reducers
これらがはっきり分かれている。

普通の？コンポーネントは

AddTodo が input の onChange から ADD_TODO の action を dispatch
TodoList が todo のリストを描画し、VisibilityFilters を内部で使用
Todo が todo ひとつを描画し、onClick で終わったかどうかのステータスをトグルする action を dispatch
VisibilityFilters が全て、完了、未完了、の条件でフィルターする。これらは activeFilter の引数で受け取り、setFilter を dispatch する。

という設計になっていて

Redux の store と reducer の設計

todo の話が難しいので、実際にコードを追ってみる

redux/actionTypes

src/ に redux/ のフォルダを作り、そこに

actionTypes.ts を作成する。

export const ADD_TODO = "ADD_TODO"; export const TOGGLE_TODO = "TOGGLE_TODO"; export const SET_FILTER = "SET_FILTER";

必要なアクションは

やることの追加
やることのトグル(完了未完了の切り替え)
表示するやることリストのフィルターのセット

これらの 3 つになる。
なのでこれら 3 つ文字列で定数として定義する。

これが actionTypes 。

redux/actions

次に今作った actionTypes を元にした actions を作成する

import { ADD_TODO, TOGGLE_TODO, SET_FILTER } from "./actionTypes";

actionTypes を import する
これらの文字列の定数たちをアクションごとの types という識別名に使う。

addTodo

let nextTodoId = 0; export const addTodo = content => ({ type: ADD_TODO, payload: { id: ++nextTodoId, content } });

次となる ID を 0 で初期化して

content を受け取り
paylaod に nextTodoId　と受け取った content を入れて
nextTodoId を +1 して
type を ADD_TODO にセットする

addTodo というアクションを作成。

toggleTodo

export const toggleTodo = id => ({ type: TOGGLE_TODO, payload: { id } });

id を受け取り、payload に渡し、
type に TOGGLE_TODO をつける

setFilter

export const setFilter = filter => ({ type: SET_FILTER, payload: { filter } });

filter を受け取り、paylaod に渡し、
SET_FILTER という type をつける

reducers/todos

reducers は何をするのか

https://react-redux.js.org/tutorials/connect#connecting-the-components

チュートリアルの解説の The Redux Store/Reducers の章を見ると
この reducers は ADD_TODO, TOGGLE_TODO, SET_FILTER, のアクションが動いた時に連動して動く。

そしてキープされるグローバルステートのオブジェクトには 2 種類ある。

byIDs が中身のある TODO リストで
allIds は TODO リストの ID だけ

と解釈する。

import { ADD_TODO, TOGGLE_TODO } from "../actionTypes";

actionTypes からやることの追加とやることの切り替えの定数を import

const initialState = { allIds: [], byIds: {} };

初期ステートの中に全ての ID の配列、個別の ID のオブジェクト
これらを空で定義する。
ここからグローバルステートが作られ、保持されていく。

export default function(state = initialState, action) { switch (action.type) { case ADD_TODO: { //... } case TOGGLE_TODO: { //... } default: // ... } }

そしてこのモジュールの機能として
ADD_TODO, TOGGLE_TODO, そして else として動く default
これらを定義する

アクションは　payload に type と　オブジェクトを送るだけだが、
reducer でその type の名前に応じたものが動き、オブジェクトの中身を処理する。

case ADD_TODO

ADD_TODO の時は

 case ADD_TODO: { const { id, content } = action.payload; return { ...state, allIds: [...state.allIds, id], byIds: { ...state.byIds, [id]: { content, completed: false } } }; }

allIds に過去全ての todos の ID たちを展開して、
現在を渡されている ID を付け加えて

byIds に byIds に入っている todos を展開して
現在渡されている todo の ID を key とする
渡されたコンテントと、未完了を表す complete: false
を入れたオブジェクトを付け加えて

現在の byIds と allIds が入っているステートに今の 2 つを付け加えて
return で返す。

これが ADD_TODO が呼び出された時に動くことになる。

case TOGGLE_TODO

 case TOGGLE_TODO: { const { id } = action.payload; return { ...state, byIds: { ...state.byIds, [id]: { ...state.byIds[id], completed: !state.byIds[id].completed } } }; }

TOGGLE_TODO の時は

id, content を両方取ってきていた ADD の時と異なり
id のみを action.payload から取得する

現在のステートを展開し、それにこれらを付け加える。

byIds に現在入っていた byIds の中身を展開し、それに

引数の ID を key として byIds の現在の ID 番号のステートを展開し
引数の ID の completed の True False を反転させる。

default

どちらでもなくて action が動いた時は、グローバルステートをそのまま返すと解釈する。

Filter 機能

Todo の追加
Todo の completed のトグル

これらと同じように
filter の変更でも reducer を別ファイルに作る。

constants.ts

export const VISIBILITY_FILTERS = { ALL: "all", COMPLETED: "completed", INCOMPLETE: "incomplete" };

表示フィルターの定数の定義。自明。

reducers/visibilityFilters.js

import { SET_FILTER } from "../actionTypes"; import { VISIBILITY_FILTERS } from "../../constants";

最初に作った actionTypes から SET_FILTER の定数を import
直前で作った constants から VISIBILITY_FILTERS の
定数オブジェクトを import

const initialState = VISIBILITY_FILTERS.ALL;

保持されるグローバルステートの初期値を all にする

const visibilityFilter = (state = initialState, action) => { switch (action.type) { case SET_FILTER: { return action.payload.filter; } default: { return state; } } };

SET_FILTER が呼ばれた時に、action.payload の filter から
受け取った filter の値をそのまま返すシンプルな処理。

export default visibilityFilter;

そして export する。自明。

これで reducers は全て作れた。

reducers/index

import { combineReducers } from "redux"; import visibilityFilter from "./visibilityFilter"; import todos from "./todos"; export default combineReducers({ todos, visibilityFilter });

最後に reducers/index で combineReducers を使って
まとめる。これで store と連携する準備が整った。

redux/selectors.js

redux 最後の大物。いくつもあるが、
getTodosByVisibilityFilter しか使われていないように見える。

import { VISIBILITY_FILTERS } from "../constants";

フィルター定数を import して

export const getTodosByVisibilityFilter = (store, visibilityFilter) => { const allTodos = getTodos(store); switch (visibilityFilter) { case VISIBILITY_FILTERS.COMPLETED: return allTodos.filter(todo => todo.completed); case VISIBILITY_FILTERS.INCOMPLETE: return allTodos.filter(todo => !todo.completed); case VISIBILITY_FILTERS.ALL: default: return allTodos; } };

しかしこれが
getTodos を使い

export const getTodos = store => getTodoList(store).map(id => getTodoById(store, id));

getTodos が getTodoList と getTodoById を使い

export const getTodoList = store => getTodosState(store) ? getTodosState(store).allIds : []; export const getTodoById = (store, id) => getTodosState(store) ? { ...getTodosState(store).byIds[id], id } : {};

getTodoList と getTodoById が getTodoState を使った。

export const getTodosState = store => store.todos;

結局、entire file を使うことになった。。。

components/TodoList

描画コンポーネントの TodoList で、selectors の

import { getTodosByVisibilityFilter } from "../redux/selectors"; const mapStateToProps = state => { const { visibilityFilter } = state; const todos = getTodosByVisibilityFilter(state, visibilityFilter); return { todos }; }

getTodosByVisibilityFilter を使う。todos を持ってくるために使った。

import { connect } from "react-redux"; export default connect(mapStateToProps)(TodoList);

これが connect されることによって
同じファイル内部の　TodoList で使えるようになる。

import Todo from "./Todo"; const TodoList = ({ todos }) => ( <ul className="todo-list"> {todos && todos.length ? todos.map((todo, index) => { return <Todo key={`todo-${todo.id}`} todo={todo} />;  }) : "No todos, yay!"} </ul> );

ここで　<Todo/> の内部に渡せた
todo はデータだが、Todo は描画するためのコンポーネント。
かなりまぎわらしい。

AddTodo, Todo, VisibilityFilters,

これらも同じように connect を利用してデータとアクションをつなげる。

import React from "react"; import { connect } from "react-redux"; import cx from "classnames"; import { toggleTodo } from "../redux/actions"; const Todo = ({ todo, toggleTodo }) => ( <li className="todo-item" onClick={() => toggleTodo(todo.id)}> {todo && todo.completed ? "👌" : "👋"}{" "} <span className={cx( "todo-item__text", todo && todo.completed && "todo-item__text--completed" )} > {todo.content} </span>  </li> ); // export default Todo; export default connect( null, { toggleTodo } )(Todo);

import React from "react"; import { connect } from "react-redux"; import { addTodo } from "../redux/actions"; class AddTodo extends React.Component { constructor(props) { super(props); this.state = { input: "" }; } updateInput = input => { this.setState({ input }); }; handleAddTodo = () => { this.props.addTodo(this.state.input); this.setState({ input: "" }); }; render() { return ( <div> <input onChange={e => this.updateInput(e.target.value)} value={this.state.input} />  <button className="add-todo" onClick={this.handleAddTodo}> Add Todo </button>  </div>  ); } } export default connect( null, { addTodo } )(AddTodo);

import React from "react"; import cx from "classnames"; import { connect } from "react-redux"; import { setFilter } from "../redux/actions"; import { VISIBILITY_FILTERS } from "../constants"; const VisibilityFilters = ({ activeFilter, setFilter }) => { return ( <div className="visibility-filters"> {Object.keys(VISIBILITY_FILTERS).map(filterKey => { const currentFilter = VISIBILITY_FILTERS[filterKey]; return ( <span key={`visibility-filter-${currentFilter}`} className={cx( "filter", currentFilter === activeFilter && "filter--active" )} onClick={() => { setFilter(currentFilter); }} > {currentFilter} </span>  ); })} </div>  ); }; const mapStateToProps = state => { return { activeFilter: state.visibilityFilter }; }; // export default VisibilityFilters; export default connect( mapStateToProps, { setFilter } )(VisibilityFilters);

まとめ

React Redux アプリで Redux のロジックを分け、connect で繋ぐためには

redux/actionTypes.js で ADD_TODO, TOGGLE_TODO, SET_FILTER, の同名変数と文字列のマップを作って

redux/actions.js で type を actionTypes から当てて、引数を paylaod にオブジェクトに入れる

redux/reducers/todo.js
redux/reducers/visibilityFilters.js

で initialState を作り、それを最初の state として、switch で
action.type ごとに渡された action.payload の値から state を更新する　case を作る

これらを redux/reducers/index.js で combineReducers で一つにしてモジュールとして出力する

その reducers を redux/store.js で import して createStore して、またモジュールとして出力する

その store を src/index.js で　Provider に結びつけて
内部に TodoApp という描画コンポーネントを描画する

その Components/TodoApp では　AddTodo, TodoList, VisibilityFilters という描画コンポーネントをさらに描画し

Components/TodoList では todo の値を mapToStateProps と connectを使って getTodosByVisibilityFilter から取ってきている

getTodosByVisibilityFilter は redux/selectors.js にあって
visibilityFilter に応じて store から todo を取ってきている。

そして Components/TodoList で todo を Components/Todo に展開して渡す

Components/Todo では todo.completed がある時は横線を引いたり、絵文字を変える className をつける。

こういう流れになっている。

DEV Community