Question

我使用React Native和Redux创建了一个应用程序，可以帮助用户找到附近的快餐。我有两个组件：地图和设置。

每个组件连接（通过react-redux）到其各自的状态。 builder.setCancelable(false);还可以调度名为Map的动作创建者：

地图组件

apiCall

设置组件

...
connect(
  ({ map }) => ({ map }),
  { apiCall }
)(Map)

我希望动作创建者... connect( ({ settings }) => ({ settings }) )(Settings)读取apiCall和map件状态的值：settings。

但是，我想避免将我的地图组件连接到this.props.apiCall(map, settings)，因为每次state.settings更新都会重新渲染。

我仍然很困惑，没有找到＆＃34;正确的方法＆＃34;在解决这个问题。这些是我尝试的东西：

将state.settings与Map联系起来并使用state.settings来防止无用的重新渲染
使用动作创建者中的shouldComponentUpdate()来阅读getState()值
将所有内容封装在另一个更高的组件中，然后传递特定的道具

前两个工作但似乎有点反模式，第三个仍然触发重新渲染。不太确定为什么即使它感觉像是一个很好的解决方案。我还没有尝试选择器，但它似乎是另一种选择。

总结一下，我的问题是：

如何调度需要从不同状态读取值的操作，同时避免不必要的重新渲染？

Answer 1

您应该使用redux-thunk。这样你就可以在你的动作创建者中返回一个函数（一个thunk），它可以访问状态

const apiCall = (apiCallArgs) => {
    return (dispatch, getState) => {
      let mapState = getState('map');
      let settingsState = getState('settings');

      return dispatch(yourApiAction);
    }
}

Redux - 来自不同州的params的行动创造者

1 个答案: