0

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

每个组件都（通过 react-redux）连接到其各自的状态。Map还可以调度一个名为的动作创建者apiCall：

地图组件

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

设置组件

...
connect(
  ({ settings }) => ({ settings })
)(Settings)

我希望动作创建者从状态中apiCall读取值： 。mapsettingsthis.props.apiCall(map, settings)

但是，我想避免将我的 Map 组件连接到，state.settings因为它会在每次state.settings更新时重新渲染。

我仍然很困惑，还没有找到解决这个问题的“正确方法”。这些是我尝试过的事情：

  • 连接和使用Map以防止无用的重新渲染state.settingsshouldComponentUpdate()
  • 使用getState()动作创建者读取state.settings值
  • 将所有内容封装在另一个更高的组件中，然后传递特定的道具

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

总结一下，我的问题是：

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

4

1 回答 1

2

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

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

      return dispatch(yourApiAction);
    }
}
于 2017-06-29T20:59:07.943 回答