Redux - 具有来自不同状态的参数的动作创建者答案

【问题标题】：Redux - action creators with params from different pieces of stateRedux - 具有来自不同状态的参数的动作创建者
【发布时间】：2017-06-29 20:40:30
【问题描述】：

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

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

地图组件

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

设置组件

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

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

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

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

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

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

总结一下，我的问题是：

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

【问题讨论】：

对于它的价值，我认为比较 shouldComponentUpdate 中的道具以防止意外重新渲染是个好主意...
@MaxMillington 是对的。此外，可能值得研究 reselect 库，它允许您创建记忆选择器，以便您的组件连接更新只有在他们从状态更改中选择的某些数据时才会发生
感谢您的回答！ @AndrewG。我会尽快重新选择。据我了解，选择器旨在用于计算派生数据，同时保持状态最小。但从你所说的来看，我也可以使用它们来选择和读取我感兴趣的值。我仍然无法理解它与经典 mapStateToProps 的不同之处。是因为“缓存”而不需要每次都重新计算更具体的状态吗？或者可能连接到单个值而不是整个状态？
你是对的，它的主要区别在于缓存。我需要准确地刷新它在做什么，但基本上它会缓存为派生状态而提供的参数，如果这些参数没有改变，它就知道它不需要更新你的组件。对于我的团队，我们发现即使您不利用缓存也很好，因为它允许您共享 mapStateToProps 中使用的通用逻辑

标签： reactjs react-native redux react-redux react-native-maps

【解决方案1】：

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

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

      return dispatch(yourApiAction);
    }
}

【讨论】：