Question

在我的React + Redux应用程序中，我需要根据用户提供的多个值来计算某些内容，然后需要在多个组件中使用此数据。

我的实际情况更加复杂，但是可以想象输入是greeting name location repeat。

如果用户输入了“ Hello”，“ John”，“ New York”，“ 2”，则generateGreeting函数的结果将返回：

["First hello John from New York", "Second hello John from New York"]

我可以想到几种方法。 1：我可以像执行常规操作一样将数据添加到Redux存储中：

function reducer(state = initState, action) {
  switch (action.type) {
    case "SET_NAME":
      const newState = {
        ...state,
        name: action.name
      }
      const generatedGreeting = generateGreeting(state)
      return {
        ...newState,
        generatedGreeting
      }

但是，这很冗长，因为每个动作都必须具有类似的代码。另外，如果有一项新操作要更改generateGreeting应该返回的内容，那么我必须记住以相同的方式使用generateGreeting，这可能会增加错误的更改。

2：更好的方法可能是让generateGreeting函数接受整个状态对象：

在容器组件中：

const mapStateToProps = (state) => ({
  generatedGreeting: generateGreeting(state)
});
return connect(mapStateToProps)(PresentationalComponent);

因此generateGreeting的结果不会出现在Redux中。这会减少错误的发生，减少代码的数量，但是由于generateGreeting函数在多个组件中被调用，会降低性能吗？

是否存在“两全其美”的解决方案，您可以从其中计算Redux的状态并在全球范围内共享它？我可以使用Context API来做到这一点，但是当我拥有Redux时引入另一种状态管理解决方案感到很混乱，尤其是因为它也是全局的。

从Redux的状态计算出一些东西并在全球范围内共享？

0 个答案: