9 redux 搭配 React Router

安装 React Router

可以使用 npm 来安装 React Router。本教程基于 react-router@^2.7.0 。

npm install --save react-router

 

连接 React Router 和 Redux 应用

首先，我们需要从 React Router 中导入 <Router /> 和 <Route />。代码如下：

import { Router, Route, browserHistory } from 'react-router';

const Root = () => (

  <Router>

    <Route path="/" component={App} />

  </Router>  );

 

然后，我们从 React Redux 导入 <Provider />，用 <Provider /> 包裹 <Router />

import { Provider } from 'react-redux';

const Root = ({ store }) => (

  <Provider store={store}>

    <Router>

      <Route path="/" component={App} />

    </Router>

  </Provider>);

完整代码如下：

import React, { PropTypes } from 'react';

import { Provider } from 'react-redux';

import { Router, Route, browserHistory } from 'react-router';

import App from './App';

 

const Root = ({ store }) => (

  <Provider store={store}>

    <Router history={browserHistory}>

      <Route path="/(:filter)" component={App} />

    </Router>

  </Provider>);

 

Root.propTypes = {

  store: PropTypes.object.isRequired,

};

export default Root;

 

 

读取 URL 中的数据

在React组件中读取url数据：

没什么变化，直接按照react router原本的方式读取

 

在mapStateToProps 中读取url数据：

React Redux的mapStateToProps 的第二可选参数 ownProps，这是原本传递给组件的props属性对象，在ownProps中就包含了react router的数据

const mapStateToProps = (state, ownProps) => {

  return {

    todos: getVisibleTodos(state.todos, ownProps.match.params.filter)

  };

};