読者です 読者をやめる 読者になる 読者になる

あいつの日誌β

あいつの日誌です。

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>
    )
  }
}

実行

% $(npm bin)/webpack
% node server.js

まとめ

というわけで token を使って認証する SPA を作る場合に React でどうやるのかを練習しました。 サーバーサイドは今回ものすごく省略しているのであまり参考にならないかもしれませんが...

Flux が流行ったり Redux が流行ったり、はたまた Rxdux が登場したり、Javascript 界隈の進歩が早い今日この頃ですが個人的にはそれよりも State をどうやって設計するのかというところを考えたい。

ソースコードはこちら

https://github.com/okamuuu/practice-react-redux-jwt