React：react-redux及redux-thunk的使用

安装标题上的两个库。

• 1. 在App的index.js里增加如下代码：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
+ import { Provider } from 'react-redux'
+ import store from './store'

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

• 2. 创建4个文件：index.js、actionCreators.js、constants.js、reducer.js

index.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'

import reducer from './reducer.js'

const composeEnhancers = /*window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true }) ||*/ compose

const storeEnhancer = applyMiddleware(thunkMiddleware)
const store = createStore(reducer, composeEnhancers(storeEnhancer))

export default store

actionCreators.js

import axios from 'axios'
import { ADD_NUMBER, SUB_NUMBER, CHANGE_BANNERS, CHANGE_RECOMMENDS } from './constants'

export const addAction = num => ({
  type: ADD_NUMBER,
  num
})

export const subAction = num => ({
  type: SUB_NUMBER,
  num
})

export const changeBannerAction = banner => ({
  type: CHANGE_BANNERS,
  banner
})

export const changeRecommendAction = recommend => ({
  type: CHANGE_RECOMMENDS,
  recommend
})

export const getRemoteDataAction = dispatch => {
  axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
    const data = res.data.data
    dispatch(changeBannerAction(data.banner.list))
    dispatch(changeRecommendAction(data.recommend.list))
  })
}

constants.js

const ADD_NUMBER = 'ADD_NUMBER'
const SUB_NUMBER = 'SUB_NUMBER'
const CHANGE_BANNERS = 'CHANGE_BANNERS'
const CHANGE_RECOMMENDS = 'CHANGE_RECOMMENDS'

export { ADD_NUMBER, SUB_NUMBER, CHANGE_BANNERS, CHANGE_RECOMMENDS }

reducer.js

import { ADD_NUMBER, SUB_NUMBER, CHANGE_BANNERS, CHANGE_RECOMMENDS } from './constants'

const defaultState = {
  counter: 0,
  banner: [],
  recommend: []
}

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    case CHANGE_BANNERS:
      return { ...state, banner: action.banner }
    case CHANGE_RECOMMENDS:
      return { ...state, recommend: action.recommend }
    default:
      return state
  }
}

export default reducer

• 3. 组件内使用

home.js

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { addAction, subAction, getRemoteDataAction } from './store/actionCreators'

class Home extends PureComponent {
  componentDidMount() {
    this.props.getRemoteData()
  }

  render() {
    return (
      <div>
        <h2>当前计数: {this.props.counter}</h2>
        <button onClick={this.props.increment}>+1</button>
        <button onClick={this.props.decrement}>-1</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  counter: state.counter
})

const mapDispatchToProps = dispatch => ({
  increment() {
    dispatch(addAction(1))
  },
  decrement() {
    dispatch(subAction(1))
  },
  getRemoteData() {
    dispatch(getRemoteDataAction)
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)

about.js

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import { addAction, subAction } from './store/actionCreators'

class About extends PureComponent {
  render() {
    return (
      <div>
        <h2>当前计数: {this.props.num}</h2>
        <button onClick={this.props.add}>+2</button>
        <button onClick={this.props.sub}>-2</button>

        <h2>banner</h2>
        <ul>
          {this.props.banner.map(item => {
            return <li key={item.acm}>{item.title}</li>
          })}
        </ul>

        <h2>recommend</h2>
        <ul>
          {this.props.recommend.map(item => {
            return <li key={item.acm}>{item.title}</li>
          })}
        </ul>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  num: state.counter,
  banner: state.banner,
  recommend: state.recommend
})

const mapDispatchToProps = dispatch => ({
  add() {
    dispatch(addAction(2))
  },
  sub() {
    dispatch(subAction(2))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(About)

参考：王老师的react。