Redux状态管理5 使用react-redux

Redux状态管理5 使用react-redux

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

安装

yarn add react-redux

使用

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

// index.js
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'

import { createStore, applyMiddleware, compose } from 'redux'

import { counter} from './index.redux'

const store = createStore(counter, compose(
  applyMiddleware(thunk)
))

ReactDOM.render(
  (<Provider store={store}>
    <App />
  </Provider>),
   document.getElementById('root')
)

// App.js
import { 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
// 将属性赋给props
const mapStateProps = (state) => {
  return {num: state}
}

// 将方法赋给props
const actionCreators = {addNum, reduceNum, addNumAsync}

App = connect(mapStateProps, actionCreators)(App) // 装饰器，返回的App已经是一个新的组件
export default App

改写App.js中的connect装饰器

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {addNum, reduceNum, addNumAsync} from './index.redux'

// 改写connect
@connect(
  // 需要state的什么属性，放到props里
  state=> ({num: state.counter}),
  // 需要什么方法，放到props里，自动dispatch
  {addNum, reduceNum, addNumAsync}
)

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>
    )
  }
}

export default App

// index.redux.js
const ADD_NUM = 'Add'
const REDUCE_NUM = 'Reduce'

// reducer
export function counter(state=0, action) {
  switch(action.type) {
    case ADD_NUM:
    return state+1
    case REDUCE_NUM:
    return state-1
    default:
    return 10
  }
}

// action creator
export function addNum () {
  return {type: ADD_NUM}
}

export function reduceNum () {
  return {type: REDUCE_NUM}
}

export function addNumAsync () {
  return dispatch => {
    setTimeout(() => {
      dispatch(addNum())
    }, 2000)
  }
}