React + Redux + JWT tutorial(3) - あいつの日誌β

前回は Redux の範疇である action と reducer を定義しました。今回は React の処理を記述します。

create src/index.js:

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import helloApp from './reducers'
import thunkMiddleware from 'redux-thunk'

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore)
let store = createStoreWithMiddleware(helloApp)
let rootElement = document.getElementById('root')

render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

create src/containers.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { fetchHello, login, fetchPrivateHello } from '../actions'
import Hello from '../components/Hello'

class App extends Component {
  render() {
    const { dispatch, helloState, privateHelloState, userState, messageState } = this.props
    return (
      <div className='container'>
        <button onClick={() => dispatch(login())} className="btn btn-primary">
          Login
        </button>
        <div>
          {messageState.statusMessage &&
            <p style={{color: "green"}}>{messageState.statusMessage}</p>
          }
          {messageState.errorMessage &&
            <p style={{color: "red"}}>{messageState.errorMessage}</p>
          }
        </div>
        <Hello
          onHelloClick={() => dispatch(fetchHello())}
          onPrivateHelloClick={() => dispatch(fetchPrivateHello())}
          isAuthenticated={userState.isAuthenticated}
          hello={helloState.hello}
          privateHello={privateHelloState.privateHello}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {

  const { helloState, privateHelloState, messageState, userState } = state

  // XXX: props にそのまま state を渡す。とりあえず今回はこうしておく
  return {
    helloState: helloState,
    privateHelloState: privateHelloState,
    messageState: messageState,
    userState: userState
  }
}

export default connect(mapStateToProps)(App)

create src/components/Hello.js

import React, { Component, PropTypes } from 'react'

export default class Hello extends Component {

  render() {
    const { onHelloClick, onPrivateHelloClick, isAuthenticated, hello, privateHello } = this.props

    return (
      <div>
        <div className="col-sm-3">
          <button onClick={onHelloClick} className="btn btn-primary">
            Get Hello
          </button>
          { hello &&
            <p>{hello}</p>
          }
        </div>

        { isAuthenticated &&
          <div className="col-sm-3">
            <button onClick={onPrivateHelloClick} className="btn btn-warning">
              Get Private Hello
            </button>
            { privateHello &&
              <p>{privateHello}</p>
            }
          </div>
        }
      </div>
    )
  }
}

実行