javascript - Redux Actions 必须是普通对象。使用自定义中间件进行异步操作

Question

代码是:

测试组件:

import {add} from './../actions/';

class Test extends Component{

    _add = (){
       this.props.add(1);
    }

    render(){
        <button onClick={this._add}>add</button>  
    }

}

const mapStateToProps = ()=>({
    haha:'haha'
});

export default connect(
    mapStateToProps,
    {add}
)(Test)

操作:

export const add = value => (dispatch) =>{
    dispatch({
        type:'ADD',
        value:value
    })
}

我点击添加按钮有这个错误!

有什么问题？

我查看了 createStore.js 和 console.log(action)。它显示了一个函数。

但是Redux的例子不是一个函数。我的代码几乎是一样的。

Answer 1

如果您使用 redux-thunk作为中间件，它将处理分派(dispatch)的函数操作....

另一个是redux-promise这会像 thunk 一样做一些事情......但是有 promise

更新:

这是一个处理异步的模型

export const add = value => (dispatch) => {
   ... do something async
}

像这样:

export const add = value => (dispatch) => {
   http.get('/path')
       .then(json => 
           dispatch({type: 'RESULT', payload: json}));
}

你的 Action 没有异步调用所以它可以这样写:

export const add = value => ({
    type:'ADD',
    value:value
})