目标

react使用redux的主要目的是：
1）实现简洁统一的状态维护，提高代码可维护性；
2）实现简洁的注入依赖，避免重重传递参数；
Plug Any Data Into Any Component. This is the problem that Redux solves. It gives components direct access to the data they need.
3）实现自动化渲染。

index.js

应用的入口代码

import React from 'react';import { render } from 'react-dom';import Counter from './Counter';import { Provider } from 'react-redux';import { createStore } from 'redux';const initialState = { count: 0};function reducer(state = initialState, action) { switch(action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; }}/*** 1） 创建全局存储对象 store,传入合适的reducer.*/const store = createStore(reducer);/*** 2） 将store实例绑定到 App*/const App = () => ( <Provider store={store}> <Counter/> </Provider>);render(<App />, document.getElementById('root'));组件代码

import React from 'react';import { connect } from 'react-redux';/*** index.js创建的store全局对象，会注入到所有下级对象中，因此这里才可以使用dispatch函数来改变属性。*/class Counter extends React.Component { increment = () => { //实际上是调用全局store对象的dispatch函数 this.props.dispatch({ type: 'INCREMENT' }); } decrement = () => { this.props.dispatch({ type: 'DECREMENT' }); } render() { return ( <div> <h3>Counter</h3> <div> <button onClick={this.decrement}>-</button> <span>{this.props.count}</span> <button onClick={this.increment}>+</button> </div> </div> ) }}//具体的属性转换函数function mapStateToProps(state) { return { count: state.count };}//通过connect方法将store的state属性转换成本组件的属性export default connect(mapStateToProps)(Counter);