用于连接功能的 React Redux mapStateToProps 参数答案

【问题标题】：React Redux mapStateToProps parameter for connect function用于连接功能的 React Redux mapStateToProps 参数
【发布时间】：2019-12-04 21:22:05
【问题描述】：

有没有办法从 redux 连接函数中的已解析承诺返回一个普通对象？

const resolveStateFunction = (state) =>{
    return Promise.resolve(state);
}
const mapStateToProps = async (state)=>{
    const resolvedState = await resolveStateFunction(state);
    return resolvedState;
}
const mapDispatchToProps = () => {
    return { apiResponse: apiResponse };
};
export default connect(mapStateToProps, mapDispatchToProps)(SchoolTemp);

resolvedState 变量返回一个已解析的对象值，但随后我收到一条错误消息，提示

Connect(SchoolTemp) 中的 mapStateToProps() 必须返回一个普通的目的。而是收到了 [object Promise]。

【问题讨论】：

async 函数返回一个承诺，这就是您收到该错误的原因。通常在使用 Redux 处理异步内容时，会有一些初始/默认状态。然后像 Promise 这样的异步东西可以在准备好数据时使用操作更新状态。
这可能对Async Flow有帮助

标签： reactjs redux react-redux

【解决方案1】：

mapStateToProps 应该返回普通对象，例如 {resolvedState: 'something'}。

这应该会有所帮助：

const mapStateToProps = async (state)=>{
    const resolvedState = await resolveStateFunction(state);
    return {resolvedState};
}

然后你可以从你的组件中引用resolvedState prop

【讨论】：

【解决方案2】：

mapStateToProps 函数应该是纯同步的

很像 Redux 的 reducer，mapStateToProps 函数应该始终是 100% 纯的和同步的。它应该简单地将 state（和 ownProps）作为参数，并返回组件所需的数据作为道具。它应该不能用于触发异步行为，例如 AJAX 数据调用获取，并且函数不应声明为异步。

https://react-redux.js.org/using-react-redux/connect-mapstate#mapstatetoprops-functions-should-be-pure-and-synchronous

【讨论】：