Redux’s Dispatch can only pass one object argument by default:

dispatch({ type: 'CHANGE_COLOR'.themeColor: color })
Copy the code

Redux-thunk enables dispatch to pass function arguments:

dispatch(changeColorAsyn(color))
Copy the code

Configuring thunk for redux is also simple:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'

const store = createStore(themeReducer, applyMiddleware(thunk))
Copy the code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />.document.getElementById('root'));
registerServiceWorker();
Copy the code

App.js

import React, { Component } from 'react';
import Header from './Header'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const themeReducer = (state, action) = > {
  if(! state)return {
    themeColor: 'red'
  }
  switch (action.type) {
    case 'CHANGE_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

const store = createStore(themeReducer, applyMiddleware(thunk))

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Header />
      </Provider>); }}export default App;
Copy the code

Header.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ThemeSwitch from './ThemeSwitch'

class Header extends Component {
  static propTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <div>
        <h1 style={{ color: this.props.themeColor}} >xutongbao</h1>
        <ThemeSwitch/>
      </div>)}}const mapStateToProps = (state) = > {
  return {
    themeColor: state.themeColor
  }
}
Header = connect(mapStateToProps, null)(Header)

export default Header
Copy the code

ThemeSwitch.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class ThemeSwitch extends Component {
  static contextTypes = {
    store: PropTypes.object
  }

  handleSwitchColor (color) {
    if (this.props.onSwitchColor) {
      this.props.onSwitchColor(color)
    }
  }

  render () {
    return (
      <div>
        <button onClick={this.handleSwitchColor.bind(this, 'red')} >Red</button>
        <button onClick={this.handleSwitchColor.bind(this, 'blue')} >Blue</button>
        <button onClick={this.handleSwitchColorByThunk.bind(this, '#f66f0c')} >Using middleware</button>
      </div>)}}Object.assign(ThemeSwitch.prototype, {
  handleSwitchColorByThunk(color) {
    this.props.onSwitchColorByThunk(color)
  }
})

let changeColorAsyn = (color) = > {
  return (dispatch) = > {
    setTimeout(() = > {
      dispatch({ type: 'CHANGE_COLOR'.themeColor: color })
    }, 2000)}}const mapDispatchToProps = (dispatch) = > {
  return {
    onSwitchColor: (color) = > {
      dispatch({ type: 'CHANGE_COLOR'.themeColor: color })
    },
    onSwitchColorByThunk: (color) = > {
      dispatch(changeColorAsyn(color))
    }
  }
}

export default connect(null, mapDispatchToProps)(ThemeSwitch)
Copy the code

Github source address: github.com/xutongbao/r…