React 髙妻智一

Reactだけで作ったアプリにReduxを導入して気づいた利点




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を導入してルーーティングを行ってみます。

The following two tabs change content below.
Twitter のプロフィール

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。