API文檔：http://cn.redux.js.org/docs/react-redux/ ## 一、簡單示例  ~~~ import React, { Component } from 'react' import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { Provider, connect } from 'react-redux' // React component class Counter extends Component { render() { const { value, onIncreaseClick } = this.props return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>Increase</button> </div> ) } } Counter.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired } // Action const increaseAction = { type: 'increase' } // Reducer function counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state } } // Store const store = createStore(counter) // Map Redux state to component props function mapStateToProps(state) { return { value: state.count } } // Map Redux actions to component props function mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch(increaseAction) } } // Connected Component const App = connect( mapStateToProps, mapDispatchToProps )(Counter) ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) ~~~ provider工作示意圖  > provider就像是一個電路板，把各元件插上去之后就能夠互相通信了，而不需要單獨給元件之間另外拉線 二、簡化合并 ~~~ import React, { Component } from 'react' import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { Provider, connect } from 'react-redux' // React component class Counter extends Component { constructor(props) { super(props); this.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired } } render() { const { value, onIncreaseClick } = this.props; return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>Increase</button> </div> ); } } // Connected Component const App = connect( function(state) { return {value: state.count}; }, function(dispatch) { return { onIncreaseClick: () => dispatch({ type: 'increase' }) }; } )(Counter); // Store const store = createStore((state={count: 0}, action) => { const count = state.count; switch (action.type) { case 'increase': return { count: count + 1 }; default: return state; } }); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ~~~ 參考鏈接：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html https://www.jianshu.com/p/ef6269d9d75a