官网地址

• redux：http://www.redux.org.cn/
• react-redux：http://cn.redux.js.org/docs/react-redux
• react-router：https://www.npmjs.com/package/react-router

部分目录结构

├─ src
    ├─ routes
    ├─ ├─ index.js
    ├─ store
    ├─ ├─ index.js
    ├─ App.js
    └─ index.js

一、安装

[project_name]> npm redux react-redux react-router --save

二、创建store

store/index.js

import {createStore} from 'redux';

function toDo(state = {name: 'tom'}, action) {
    switch (action.type) {
        case 'CHANGE_NAME':
            return {...state, ...action.payload};
        default:
            return state;
    }
}

let store = createStore(toDo);

export default store;

三、创建routes

routes/index.js

import App from '../App';

const routes = [
    {
        path: '/',
        component: App
    }
];

export default routes;

四、导入

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {Provider} from "react-redux";

import store from './store';
import routes from './routes';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>{routes}</Router>
    </Provider>, 
    document.getElementById('root')
);

registerServiceWorker(); // 用于生产环境cache数据

五、组件(页面)使用

App.js

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

class App extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        {this.props.cName}
        <button type="button" onClick={this.changeName.bind(this)}>改变name</button>
      </div>
    );
  }
  changeName() {
    this.props.changeName({name: 'jack'});
  }
}

// 把state放到props里
function mapStateToProps(state, props) {
  return {
    cName: state.name
  }
}

// 把方法放到props里
function mapDispatchToProps(dispatch, props) {
  return {
    changeName: (payload)=>dispatch({type: 'CHANGE_NAME', payload: payload})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);