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

您只是错过了箭头功能中的箭头=>：

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

Answer 2

如果您使用redux-thunk作为中间件，它将处理已调度的函数操作....

另一个是redux-promise，它会像thunk一样思考......但是有了承诺

<强>更新

这是处理异步

的模型

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

喜欢这个：

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

您的操作没有异步调用，因此可以这样写：

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

Answer 3

您应该像这样编写您的动作创建者：

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

将动作创建者连接到组件的方式（将快捷符号{ add }作为第二个参数传递给connect）可以省略dispatch connect当以这种方式调用时，会自动将你的动作创建者包装成dispatch。

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

3 个答案: