react 事始め 12

◾️render内の処理の実装

状態やActionはインスタンスのpropsが渡していくので、propsを変数として入れておく。表示する値は、reducer内のcountのオブジェクトのvalueの値であるので、props.valueを設定する。onClickに対応するメソッド・コールは、incrementとdecrementに替えて、それらの関数を呼べるようにする。

src/components/App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions'

class App extends Component {
  render(){
    const props = this.props

    return (
      <React.Fragment>
        <div>value: { props.value }</div>
        <button onClick={props.increment}>+1</button>
        <button onClick={props.decrement}>-1</button>
      </React.Fragment>
      )
  }
}

export default App;

次に、StateとComponentを関連付ける部分の実装を行う。connect関数を使って、引数にComponentを渡す。 mapStateToPropsとmapDispatchToPropsに実体を記述する。

mapStateToPropsは、Stateの情報からComponentで必要なものを取り出して、Component内のpropsとしてマッピングする機能をもつ関数である。引数には状態のトップレベルを示すstateを記述して、どのようなオブジェクトをpropsとして対応させるか、関数の戻り値として定義する。counterの現在の値であるvalueを表示したいので、valueをキー、state.count.valueに値を持つオブジェクトを返す。

const mapStateToProps = state => ({ value: state.count.value })

mapDispatchToPropsは、あるActionが発生した時にreducerにtypeに応じた状態遷移を実行させるための関数である。 dispatch関数を引数においてComponentで必要となるdispatch関数を宣言する。incrementとdecrementのボタンがあるので、ボタンのクリック時に該当のActionをdispatchに渡して実行させることで状態遷移させることができる。incrementをキーに、increment関数を引数にもつdispatch関数を値に定義したmapDispatchToPropsを定義する(decrementも同様)。

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})

mapDispatchToPropsは、以下のように簡単にできる。

const mapDispatchToProps = ({ increment, decrement })

App.jsの全体

src/components/App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions'

class App extends Component {
  render(){
    const props = this.props

    return (
      <React.Fragment>
        <div>value: { props.value }</div>
        <button onClick={props.increment}>+1</button>
        <button onClick={props.decrement}>-1</button>
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({ value: state.count.value })

const mapDispatchToProps = ({ increment, decrement })

export default connect(mapStateToProps, mapDispatchToProps)(App)