Reduxとは
ReactもReduxも初心の自分が一言で表すとstateの管理をまとめてくれるフレームワークって感じですかね?
自分が実際にReactだけでサンプルアプリを実装してからReduxを導入してみた感想ですが、Reactだけで実装しているとコンポーネント内にstateを変更するロジックがいっぱい入ってきて見通しが悪くなるのと、どこでも自由にstateを変更できるので管理が大変になりそうだなと思いました。
実際にReduxを使ってみるとstateを変更する箇所をまとめることができ、コンポーネントからロジックを排除することができました。これだけでもコンポーネントないの見通しがよくなり変更や追加がしやすくなったと思います。
デメリットとしては、最初にReduxをキレイに扱うためにディレクトリやファイルがめっちゃ増えてどこに何をかけばいいんだ?という状態になります。ここは実際にReduxを書いていくことで理解できるのでそこまでデメリットではないですが、学習コストが少しだけかかります。
実際にReact/Reduxで作ったゲームのソースコードをGitHubに公開しているので見てみてください。
重要そうなとこを少しだけ紹介しておきます。
Container
ContainerではComponentにstateとstateを変更するためのメソッドを使えるように両者を紐付ける設定を行います。これを設定することでコンポーネントからロジックを取り除くことができ、state管理も一箇所で行えるようになります。
import { connect, } from 'react-redux' import Game from './../components/Game' import GameActions from './../actions/Game' const mapStateToProps = (state) => { return state } const mapDispatchToProps = (dispatch) => { return { click(index) { dispatch(GameActions.click(index)); }, move(stepNumber) { dispatch(GameActions.move(stepNumber)); } } } export default connect(mapStateToProps, mapDispatchToProps)(Game)
Reducer
Reducerではstateとstateを変更するロジックを一箇所にまとめて管理します。ここでstateを変更するとrenderメソッドが呼ばれstateに合わせて自動でhtmlをレンダリングしてくれます。しかも、Reactが差分だけをよしなにレンダリングしてくれるので高速な描画が実現できるとのことです。
import game from './../utils/game' const initialState = { history: [{ squares: Array(9).fill(null) }], stepNumber: 0, xIsNext: true } const reducer = (state = initialState, action) => { const history = state.history.slice(0, state.stepNumber + 1); const current = history[history.length - 1]; const squares = current.squares.slice(); if (game.calculateWinner(squares) || squares[action.index]) { return state; } switch (action.type) { case 'CLICK': { squares[action.index] = state.xIsNext ? 'X' : 'O'; return { history: history.concat([ { squares: squares } ]), stepNumber: history.length, xIsNext: !state.xIsNext } } case 'MOVE': { return { history, stepNumber: action.stepNumber, xIsNext: (action.stepNumber % 2) === 0 } } default: { return state } } } export default reducer
まとめ
数日もいじってればReact/Reduxは理解できるので意外と学習コスト高くなくてよかったです。次はReact-Routeを導入してルーーティングを行ってみます。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す