Redux状态管理5 使用react-redux

• 忘记subscribe，记住reducer，action和dispatch即可。不需要使用props传递
• react-redux提供provider和connect两个接口来链接

安装

yarn add react-redux

使用

• Provider组件在应用最外层，传入store即可，只用一次
• Connect负责从外部获取组件需要的参数
• Connect可以用装饰器的方式来写

// index.jsimport { Provider } from 'react-redux'import { createStore, applyMiddleware, compose } from 'redux'import { counter} from './index.redux'const store = createStore(counter, compose(  applyMiddleware(thunk),  reduxDevtools))ReactDOM.render(  (<Provider store={store}>    <App />  </Provider>),   document.getElementById('root'))

// App.jsimport { connect } from 'react-redux'import {addNum, reduceNum, addNumAsync} from './index.redux'class App extends Component {  render() {    return (      <div>        <button onClick={this.props.addNum}>增加</button>        <button onClick={this.props.addNumAsync}>延迟增加</button>        <button onClick={this.props.reduceNum}>减少</button>        <div>现在有{this.props.num}</div>      </div>    )  }}// 返回state中需要的数据num// 将属性赋给propsconst mapStateProps = (state) => {  return {num: state}}// 将方法赋给propsconst actionCreators = {addNum, reduceNum, addNumAsync}App = connect(mapStateProps, actionCreators)(App) // 装饰器，返回的App已经是一个新的组件export default App

// index.redux.js 无变化const ADD_NUM = 'Add'const REDUCE_NUM = 'Reduce'// reducerexport function counter(state=0, action) {  switch(action.type) {    case ADD_NUM:    return state+1    case REDUCE_NUM:    return state-1    default:    return 10  }}// action creatorexport function addNum () {  return {type: ADD_NUM}}export function reduceNum () {  return {type: REDUCE_NUM}}export function addNumAsync () {  return dispatch => {    setTimeout(() => {      dispatch(addNum())    }, 2000)  }}