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

测试组件：

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 
    }) 
}

我，单击Add按钮也有这个错误！

这是什么问题？

我看着createStore.js和console.log(action)。它显示一个功能。

但是Redux的例子不是函数。我的代码几乎相同。

来源

2016-11-24 mqliutie

如果使用redux-thunk作为一个中间件，它会处理出动功能的行为....

另一个是redux-promise将做somethink像形实转换......但承诺

更新：

这是一个模型来处理异步

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 
})

来源

2016-11-24 09:07:25

我没有使用'redux-thunk'和'redux-promise'。 – mqliutie

这就是为什么REDX抱怨..要使用异步操作...您需要REDIX thunk中间件 –

是的，我导入** REDEX-thunk **它的工作原理 – mqliutie

你只是缺少箭头=>在箭头功能：您的行动的创建者连接到您的组件（

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

方式：

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

来源

2016-11-24 08:43:14

对不起，我没有直接拷贝，我犯了一个错误。其实，代码是** => ** – mqliutie

你仍然错过了一个箭头。为了实现这个目标，你需要减少中间件。 –

谢谢〜让我试试 – mqliutie

你应该写你的行动创造者这样将其作为connect的第二个参数以{ add }作为第二个参数传递它）允许您省略dispatch，因为connect将自动包装您的动作创建者i当以这种方式调用时，可以拨打dispatch。

来源

2016-11-24 08:55:20

对不起，我没有直接复制，我犯了一个错误。其实，代码是** => ** – mqliutie

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

回答

相关问题