Reduxを導入してみた

Tweet

Reduxってなに？

アーキテクチャの一つ。
コンポーネントが増えた時に、簡単に状態が管理ができることが特徴。
ただし、コンベンション(習慣とか決まった書き方のこと)が多いので、注意。

①パッケージのインストール

yarn add redux react-redux

②actionの作成

java scriptのオブジェクトのこと。
プロジェクト内部でtypeという値とkeyを持つ。また、「typeの値はunique」である必要あり。
アクションは、「アプリケーションの中で、何が起きたかを示すデータ」を管理する。

アクションの作成だが、やることは以下の通り。
① reduxプロジェクトの「src」直下に「actions」フォルダ作成
② actionsフォルダにファイル「index.js」を作成。中身は以下の通りに記述する。

//component側で使用するのでexport をする
export const YESCOUNT = 'YESCOUNT'
export const NOCOUNT = 'NOCOUNT'
export const yesCount = () => {
    return{
        type: 'YESCOUNT'
    }
}
export const noCount = () =>{
    return{
        type: 'NOCOUNT'
    }
}   

③Reducerの作成

Actionを元に、状態を更新するメソッドを書くファイル。

[やること]
① reduxプロジェクトの「src」直下に「reducers」フォルダ作成
② reducersフォルダにファイル「index.js」「count.js」を作成。中身は以下の通りに記述する。
※ yesとnoカウントでファイル分けてもよいかもしれない。

[index.js]

import {combineReducers} from 'redux'
import count from './count'

export default combineReducers({ count })

[count.js]

import {YESCOUNT,NOCOUNT, yesCount} from '../actions'
const initialstate = {
    NoCount:0,
    YesCount:0
}

export default (state = initialstate,action) => {
    switch(action.type){
        case YESCOUNT:
            return {
                YesCount:state. YesCount+ 1,
                NoCount:state.NoCount
            }
        case NOCOUNT:
            return {
                NoCount:state.NoCount + 1,
                YesCount:state. YesCount
            }    
        default:
                return state
    }
}

④Componentの作成

実際に画面の描画を行う箇所。

[やること]
① reduxプロジェクトの「src」直下に「components」フォルダ作成
② reducersフォルダにファイル「App.js」を移動させる。内容は以下の通りに記述する。

import React,{Component} from 'react'
import {connect} from 'react-redux'

import {yesCount,noCount} from '../actions'

class App extends Component{
    render(){
        //propsの定義
        const props = this.props
        return(
            <React.Fragment>
            <div>
                <div>Yesの値:{props.yesCnt}</div>
                <div>Noの値：{props.noCnt}</div>
                <button onClick = {props.yesCount} >Yes</button>
                <button onClick = {props.noCount}>No</button>
            </div>
            </React.Fragment>
        )
    }
}

//使用するstateを定義
const mapStateToProps = state => (
    {
        yesCnt:state.count.YesCount,
        noCnt:state.count.NoCount
    }
)

//使用する関数を定義
const mapDispatchToProps =({
  yesCount,noCount
})

//両方定義する
export default connect(mapStateToProps,mapDispatchToProps)(App)

⑤index.jsの内容を修正する。

ファイルを別フォルダに移動したので、対応させる。
加えて、いろいろインポートする必要がある。
内容は、以下の通り

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import reducer from './reducers'

//このstoreは、アプリケーションで一意。リデューサーの定義が集約される。
const store = createStore(reducer)

//storeの内容をどのコンポーネントからもアクセス可能にする処理
ReactDOM.render(
  <Provider store = {store}>
    <App></App>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();