javascript - 链接 connect/mapStateToProps/mapDispatchToProps 函数以在 react-redux 中重用代码

Question

假设我有两个 redux 连接组件。第一个是一个简单的 todo 加载/显示容器，将以下函数传递给 connect()； mapStateToProps 从 redux state 中读取 todos，mapDispatchToProps 用于向 state 请求服务器提供最新的 todos 列表:

TodoWidgetContainer.js

import TodoWidgetDisplayComponent from '...'

function mapStateToProps(state) {
  return {
    todos: todoSelectors.getTodos(state)
  };
}

function mapDispatchToProps(dispatch) {
  return {
    refreshTodos: () => dispatch(todoActions.refreshTodos())
  };
}

connect(mapStateToProps, mapDispatchTo)(TodoWidgetDisplayComponent);

第二个 redux 组件旨在应用于页面上的任何组件，以便组件可以指示是否显示全局“加载”图标。由于这可以在任何地方使用，我创建了一个辅助函数，将 MapDispatchToProps 包装在一个闭包中，并为每个组件生成一个 ID，用于确保所有请求加载器的组件都表明它们没有不再需要它了，全局加载器可以隐藏。

功能基本如下，mapStateToProps 将加载器可见性暴露给组件，mapDispatchToProps 允许它们请求加载器显示或隐藏。

加载.js

function mapStateToProps(state) {
  return {
    openLoader: loaderSelectors.getLoaderState(state)
  };
}

function mapDispatchToProps() {
  const uniqId = v4();
  return function(dispatch) {
    return {
      showLoader: () => {
        dispatch(loaderActions.showLoader(uniqId));
      },
      hideLoader: () => {
        dispatch(loaderActions.hideLoader(uniqId));
      }
    };
  };
}

export default function Loadify(component) {
  return connect(mapStateToProps, mapDispatchToProps())(component);
}

所以现在，如果我有一个组件想要访问加载器，我可以这样做:

import Loadify from '...'

class DisplayComponent = new React.Component { ... }

export default Loadify(DisplayComponent);

它应该给它一个唯一的 ID，允许它请求加载器显示/隐藏，只要有一个组件请求它显示，加载器图标就会显示。到目前为止，这一切似乎都运行良好。

我的问题是，如果我想将它应用到待办事项组件，以便该组件可以请求/接收其待办事项，同时还允许请求加载程序在处理时显示，我可以做类似的事情吗:

TodoWidgetContainer.js

import Loadify from '...'
import TodoWidgetDisplayComponent from '...'

function mapStateToProps(state) {
  return {
    todos: todoSelectors.getTodos(state)
  };
}

function mapDispatchToProps(dispatch) {
  return {
    refreshTodos: () => dispatch(todoActions.refreshTodos())
  };
}

const TodoContainer = connect(mapStateToProps, mapDispatchTo)(TodoWidgetDisplayComponent);

export default Loadify(TodoContainer);

假设没有重复键，redux 会自动将对象合并在一起以使它们兼容吗？还是只需要最近的一组 mapStateToProps/mapDispatchTo 除非我进行某种手动合并？或者有没有更好的方法来获得我没有看到的这种可重用性？我真的宁愿避免为我们需要的每个组件创建一组自定义容器。

Answer 1

connect 将自动合并“传递给包装器组件的 Prop ”、“来自该组件的 mapState 的 Prop ”和“来自该组件的 的 Prop ”的组合>mapDispatch”。该逻辑的默认实现很简单:

export function defaultMergeProps(stateProps, dispatchProps, ownProps) {
  return { ...ownProps, ...stateProps, ...dispatchProps }
}

因此，如果您将多个级别的 connect 堆叠在一起，只要它们的名称不同，被包装的组件将接收所有这些 Prop .如果这些 Prop 中的任何一个确实具有相同的名称，那么根据此逻辑，只会显示其中一个。