操作必须是React/Redux中的普通对象？

当我通过我的动作创建者传递数据时，我遇到的问题是Actions must be plain objects。基本上，我试图通过点击一个按钮来捕获用户输入，并且基于什么按钮（视图）被点击event.target.innerHTML被传递给动作创建者fetchDataAsync(view)，然后该动作创建者通过axios和派送基于什么视图被选中。操作必须是React/Redux中的普通对象？

虽然我仍然对Redux有所了解，但我不确定我在这里做错了什么。我已经看到了前一个行动的创建者内部进行异步操作...

组件与终极版连接：

class ViewSelector extends Component { 
    selectView(event) { 
    this.props.fetchDataAsync(event.target.innerHTML); 
    } 

    render() { 
    return (
     <nav> 
     <button onClick={this.selectView.bind(this)}>VIEW ALL</button> 
     <button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button> 
     <button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button> 
     </nav> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    view: state.view 
    }; 
} 

export default connect(mapStateToProps, actions)(ViewSelector);

行动的创建者分派基于event.target.innerHTML：

export function fetchDataAsync(view) { 
    return dispatch => { 
    dispatch(fetchData()); 

    axios.get(DATA_URL) 
    .then(res => { 
     dispatch(fetchDataSuccess(res.data)); 
     if (view == 'VIEW LAST WEEK') { 
     dispatch(lastWeekData(res.data)); 
     } else if (view == 'VIEW LAST MONTH') { 
     dispatch(lastMonthData(res.data)); 
     } 
    }).catch(err => { 
     dispatch(fetchDataFailure(err)); 
    }); 
    }; 

}

任何意见是赞赏。或者，如果您认为有更有效的方式来捕获用户输入并将其传递给动作创建者......我会好奇听到更多！

来源

2016-09-26 Jose

您需要安装redux-thunk才能使用异步操作。然后创建像这样的商店

import thunk from 'redux-thunk'; 
const store = createStore(YOURREDUCER, applyMiddleware(thunk));

来源

2016-09-26 00:35:08 Lowkey

好吧，所以我已经实现了redux-thunk，但是如果我尝试使用thunk运行的动作创建者有一个需要传递的参数呢？在这种情况下查看。我目前没有工作：'store.dispatch（fetchDataAsync（view））;' – Jose

使用redux-thunk实现，您应该可以进行异步调用。这可能是您的代码的其他问题。什么是错误信息？您是否尝试过调试以查看该操作是否被触发？ – Lowkey

想通了。我已经在另一个文件中创建了'createStore'，并且忘记了它。谢谢！ – Jose

您上面的一般想法是正确的。在React组件中，您想要隔离与异步函数相关的信息并使用该信息调用动作创建者。动作创建者可以进行XHR呼叫，然后相应地分派动作。（我假设你已经安装了中间件，否则看起来像redux-thunk开始。在这种情况下，中间件有助于连接点，确保异步操作和结果得到适当调度）。

不知道太多关于lastWeekData,lastMonthData等，我只会建议可能简化呼叫的'然后'部分。如果有任何特殊的逻辑，它通常属于减速器。

来源

2016-09-26 00:36:32 geoboy

操作必须是React/Redux中的普通对象？

回答

相关问题