使用Redux从reducer返回一个promise

Question

我正在使用这个入门套件,下面的代码可以在这个fork上找到.

柜台组件:

export const Counter = (props) => (
  <div style={{ margin: '0 auto' }} >
    <h2>Counter: {props.counter}</h2>
    <button className='btn btn-default' onClick={props.double}>
      Double (Async)
    </button>
  </div>
)
Counter.propTypes = {
  counter     : React.PropTypes.number.isRequired,
  double : React.PropTypes.func.isRequired,
  increment   : React.PropTypes.func.isRequired
}

export default Counter

而容器组件:

import { connect } from 'react-redux'
import { increment, double } from '../modules/counter'

import Counter from '../components/Counter'

const mapDispatchToProps = {
  increment : () => increment(1),
  double: () => double()
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

行动:

export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'
export const COUNTER_DOUBLE = 'COUNTER_DOUBLE'
// ------------------------------------
// Actions
// ------------------------------------
export const increment = (value = 1) => {
  return {
    type: COUNTER_INCREMENT,
    payload: value
  }
}
export const double = (value = 0) => {
  return {
    type: COUNTER_DOUBLE,
    payload: value
  }
}

const doubleAsync = (state) => {
  return (dispatch, getState) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        dispatch(increment(state))
        resolve()
      }, 200)
    })
  }
}

export const actions = {
  increment,
  double
}


const ACTION_HANDLERS = {

  [COUNTER_INCREMENT]: function (state, action) {
    return state + action.payload
  },
  [COUNTER_DOUBLE]: (state, action) => {
    return doubleAsync()

    }
  }
}

还原剂:

const initialState = 0
export default function counterReducer(state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type]
  return handler ? handler(state, action) : state
}

但是,COUNTER_DOUBLE操作处理程序似乎不更新视图,也不呈现任何内容.我收到这个警告:

警告:失败的道具类型: 提供counter的类型的无效道具,预期.functionCounternumber

我意识到我已经定义了一个数字propType并且返回promise函数导致了这个错误.我甚至试图修改mapDispatchToProps以返回执行的promise函数无济于事.我究竟做错了什么？

我在这里搜索过,似乎是使用redux-thunk用一个立即执行的函数来包装promise,但是我很难让它工作.

任何帮助,将不胜感激!

Answer 1

默认情况下,redux希望操作是普通对象.如果你想编写一些异步代码并返回一个你需要使用某种中间件的promise,那么redux-thunk将是一个很好的选择.

redux-thunk的README页面实际上已经完全记录,并且有一个完整的例子.基本上你需要将redux-thunk中间件应用到你的商店,如下所示:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

另外我建议你阅读有关异步动作创建者的redux文档,它有一些很好的例子.