实例解读React Router4.0与React Redux

1、Router4.0的Link实现跳转操作

1.1、react入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouterIndex from './routers/index.js';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<RouterIndex />, document.getElementById('root'));
registerServiceWorker();

在入口文件中需要指定root加载哪个js文件，在这里指定的RouterIndex作为优先加载的对象。（一般默认加载路由）

1.2、routers文件夹中的index.js

import React, { Component } from 'react';
import {BrowserRouter } from 'react-router-dom';
import { Router, Route, } from 'react-router'
import App from '../components/App.js'
import Home from '../components/Home.js'
import Foo from '../components/Foo.js'
import Bar from '../components/Bar.js'
export default class RouterIndex extends Component { render() { 
return (
 <BrowserRouter> 
   <App path="/App" component={App}> 
     <Route path="/App/foo" component={Foo} />
     <Route path="/App/bar" component={Bar} /> 
   </App>
 </BrowserRouter> ) 
}}

在React router4.0中，充分体现了一切皆组件的原理。如果是主component，在主component中如果将子控件呈现采用this.props.childred的方式，则必须按照此方式写。

1.3、各个页面呈现（App.js/Bar.js/Foo.js）

App.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class App extends Component{

  render() {
  return (
    <div>
      <header>
        Links:  
        <Link to="/App/foo">Foo</Link>
        <Link to="/App/bar">Bar</Link>
      </header>
      <div style={{ marginTop: '1.5em' }}>{ this.props.children}</div>
    </div>
  )
}
}

foo.js

import React, { Component } from 'react';

export default class Foo extends Component {
  render() {
    return <div>I am Foo!</div>
  }
}

Bar.js

import React, { Component } from 'react';

export default class Bar extends Component {
  render() {
    return <div>And I am Bar!</div>
  }
}

现在通过React Router4.0的link就可以使页面正常跳转了。

2、通过React router4.0实现有条件的跳转

在我的认知中，RR4.0提供的Link只能进行无条件的跳转、传参，满足条件跳转成功（即将跳转放入函数中目前Link还做不到），因此该跳转就要介入history了。

根据我所查的资料发现RR4.0有条件的跳转有三种方式，但这种嵌套关系实现跳转成功的只有一种，如下代码所示。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from "prop-types";

export default class App extends Component{
  static contextTypes = {
    router: PropTypes.object
  }
constructor(props,context){
  super(props,context);
}
  render() {
   return (
    <div>
      <header>
        Links:  
        <Link to="/App/foo">Foo</Link>
        <Link to="/App/bar">Bar</Link>
      </header>
     <div>
          <button onClick={() =>{ this.context.router.history.push("/App/foo"); }}>Go to /App/foo</button> 
     </div>
      <div style={{ marginTop: '1.5em' }}>{ this.props.children}</div> 
    </div> 
  )}}

此代码是在app.js的基础上进行了修改，通过单击按钮实现跳转成功。

3、加入React-redux，实现页面传参

3.1、在React router中融合redux

import React, { Component } from 'react';
import { createStore} from 'redux'
import { Provider } from 'react-redux'
import {BrowserRouter } from 'react-router-dom';
import { Router, Route, } from 'react-router'


import reducers from '../reducers/index.js'
import  App from '../components/App.js'
import  Home from '../components/Home.js'
import  Foo from '../components/Foo.js'
import  Bar  from '../components/Bar.js'

const store = createStore(reducers);

export default class RouterIndex extends Component {
  render() {
    return ( 
        <Provider store={store}>
          <BrowserRouter>
            <App path="/App" component={App}>
              <Route path="/App/home" component={Home} />
              <Route path="/App/foo" component={Foo} />
              <Route path="/App/bar" component={Bar} />
            </App>
          </BrowserRouter>
        </Provider>
    )
  }
}

3.2、创建reducers文件夹，写入state和action

import { combineReducers } from 'redux'
const initialState={
    number:2
};
function update(state = initialState, action) {
    switch (action.type) {
        case 'INCREASE':
            console.log("INCREASE");
            console.log(state);
            return {
                number: state.number+action.payload 
            };
        case 'DECREASE':
            console.log("DECREASE");
            console.log(state);
            return {
                number:state.number- action.payload  
            };
        default:
            return state;
    }
}
export default combineReducers({
    count: update,
})

3.3、在app中融入home.js(加入reducer的页面)以及home.js

<Link to="/App/home">Home</Link>

在app.js中加入一条link语句，引到home.js页面

home.js

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

class Home extends Component {
  render() {
    const { number, setIncrease, setDecrease } = this.props;
    console.log('this.props.number');
    console.log(this.props.number);
    return (
      <div>
        Some state changes:
      {this.props.number}
        <button onClick={() =>
          setIncrease({
            type: 'INCREASE',
            payload: 1
          })}>
          Increase</button>
        <button onClick={() => 
         setDecrease({
          type: 'DECREASE',
          payload: 1
        })}>Decrease</button>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
    number: state.count.number
  }
}
function mapDispatchToProps(dispatch) {
  return {
    setIncrease: (state) => dispatch(state),
    setDecrease: (state) => dispatch(state)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)

4、结束语

通过mapStateProps获取store中传过来的状态机，通过mapDispatchToProps向store发送需要存储的store，同时将这个页面通过connet与reducer进行了连接。

完整的React router4.0和reducer构建的一个简短的项目就这样形成了！

PS：附上github上自己写的源码程序，仅供大家参考：https://github.com/shaolong88/reactCount