over 3 years ago

簡易的使用 react-router-redux 建構 Redux 與 React Router 環境

React Router Tutorial 會一步一步教你怎使用相關的 Router 功能

延續 React Redux 環境建立及心得

再 Install react-router 跟 react-router-redux

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

package.json 內容

{
  ...
  ....
  ......
  "dependencies": {
    "immutable": "^3.7.5",
    "react": "^0.14.2",
    "react-dom": "^0.14.2",
    "react-redux": "^4.0.0",
    "react-router": "^2.0.0",
    "react-router-redux": "^4.0.0",
    "redux": "^3.0.4",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18"
  }
}

修改 store.js
於 createStore 內加入 combineReducers 追加綁定 routing state

import { createStore, combineReducers } from 'redux';
import todos from './reducers/todos'
import { routerReducer } from 'react-router-redux'

export default createStore(
  combineReducers({
    todos,
    routing: routerReducer
  })
)

建立 \modules\Repos.js
此用 this.props.params 顯示
傳過來的 URL Params

import React from 'react'

export default React.createClass({
  render() {
    return <h2>{this.props.params.repoName}</h2>
  }
})

修改 \components\todoItem.jsx
使用 Link

import React from 'react'
import { Link } from 'react-router'

const todoItem = ({index, actions, value}) => (
  <div>
   <span onClick={e=>{
     actions.deleteTodo(index);
     alert(index);
   }}  id={value}>{value}
   </span>
   (<Link to={'/repos/' +  value}>Link</Link>)
   </div>
)

export default todoItem

修改 \components\todos.jsx
將 mapStateToProps 內的 todos 改為 state.todos

function mapStateToProps(state) {
  return {
    todos : state.todos
  }
}

修改 \components\app.jsx
建立 Router 結構使用 URL Params
使用 syncHistoryWithStore 關聯 browserHistory 跟 state.routing

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import store from '../store'
import Todos from './todos'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import Repos from '../modules/Repos'

const history = syncHistoryWithStore(browserHistory, store)
let reactElement = document.getElementById('react')
render(
  <Provider store={store}>
    <Router history={history}>
        <Route path="/" component={Todos} />
        <Route path="/repos/:repoName" component={Repos}/>
    </Router>
  </Provider>,
  reactElement
)

修改 package.json scripts 加入 --history-api-fallback

"scripts": {
    "start": "webpack-dev-server --devtool eval --progress --colors --hot --inline --history-api-fallback"
 },

執行

 npm start

執行結果
可點選 Link 顯示文字


也可以直接使用 URL Params 傳遞值

可以在 \reducers\todos.js
加入 LOCATION_CHANGE 在 Route 做轉換時來抓取或修改 state 內容

 import {
    LOCATION_CHANGE
} from 'react-router-redux';

switch(action.type)
  case LOCATION_CHANGE:
  ...
  .....
  .......
  retrun state
← React 遮罩視窗 Component React Redux 使用 Chrome Redux DevTools Extension 監測 state →
 
comments powered by Disqus