React tutorial (5)

前回は React で Single Page Application をするためによく使われる redux-saga に触れました。今回もよく使われる機能である react-router に触れます。

準備

react-router と一緒に react-router-redux を install します。

npm install --save react-router react-router-redux

各種ファイル作成

touch src/containers/App.js src/containers/Home.js

create src/containers/App.js

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

class App extends Component {

  render() {
    return (
      <div className="container">
        <h1>Single Page Application</h1>
        <p><Link to="/">Home</Link> | <Link to="/posts">Posts</Link></p>
        <div style={{ marginTop: '1.5em' }}>{this.props.children}</div>
      </div>
    )
  }
}

export default connect(state => (state))(App)

create src/components/Home.js

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

class Home extends Component {

  render() {
    return (
      <div>
        <h2>Home</h2>
        <p>this is Home.js</p>
      </div>
    )   
  }
}

export default connect(state => (state))(Home)

edit src/Root.js

import 'babel-polyfill'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import React from 'react'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

import configureStore from './store/configureStore'
import App from './containers/App'
import Home from './containers/Home'
import Posts from './containers/Posts'

const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)

const NotFound = () => (<div><span>NOT FOUND</span></div>)

export default (props) => (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="posts" component={Posts} />
      </Route>
      <Route path="*" component={NotFound}/>
    </Router>
  </Provider>
)

edit src/reducers/index.js

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

import { FETCH_SUCCESSED } from '../actions'

const fetchInitialState = {
  posts: []
}

function fetch(state = fetchInitialState, action) {
  switch (action.type) {
  case FETCH_SUCCESSED:
    return Object.assign({}, state, action.payload)
  default:
    return state
  }
}

const rootReducer = combineReducers({
  fetch,
  routing: routerReducer,
})

export default rootReducer

以下を実行

% node devServer.js

説明

ここでは App.js が template の layout を担当しています。 Navigator のような共通パーツを親コンポーネントに配置して、子となるコンポーネントを URL に応じて振り分けて表示させます。ここでは紹介しませんが親、子、孫と伝播させることも可能です。

まとめ

今回は Single Page Application の Routing を紹介しました。次回は npm で利用できる notification を紹介します。

あいつの日誌β

働きながら旅しています。

目次

準備

各種ファイル作成

説明

まとめ