React-Redux 初歩 boolean

Redux初心者のメモ。
ログイン状態を判定したい時にboolean型のstateをReduxで管理してみる。（ここではログイン処理やフォームの実装はしません。）

Action

ストアの state を変更するためのメッセージを定義。

src/actions/index.js

export const SIGN_IN = 'SIGN_IN'
export const SIGN_OUT = 'SIGN_OUT'

  export const sign_in = () => {
    return {
      type: SIGN_IN
    }
  }

  export const sign_out = () => {
    return {
      type: SIGN_OUT
    }
  }

Store

Reducerをもとに、storeを作成

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import reducer from './reducers'
import App from "./components/App";

const store = createStore(reducer)


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Reducer

actionを受けてstateを変更する.

src/reducers/islogged.js

import { SIGN_IN ,SIGN_OUT} from '../actions'

//初期値にfalse
const initialState = { value: false }

export default (state = initialState, action) => {
  switch (action.type) {
    case SIGN_IN:
      return { value: true  }
    case SIGN_OUT:
      return { value: false }
    default:
      return state
  }
}

Reducer群を管理する。Reducerが増えた時に必要。

qiita.rb

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

export default combineReducers(({islogged }))

コンポーネント

storeで呼び出したAppコンポーネント
Stringメソッドでbooleanを文字を変更して表示している。
buttonを押すとstateが切り替わる。

src/components/App.js

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

import { sign_in,sign_out } from '../actions'

class App extends Component {
  render() {
    const props = this.props
    return (
      <React.Fragment>
        <div>count:{String(props.value)}</div>
        <button onClick={props.sign_in}>+</button>
        <button onClick={props.sign_out}>-</button>
      </React.Fragment>
    );
  }
}


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


const mapDispatchToProps = dispatch => ({
  sign_in: () => dispatch(sign_in()),
  sign_out: () => dispatch(sign_out())

})


export default connect(mapStateToProps, mapDispatchToProps)(App)