redux - 为什么不是 "pre-connect"Redux Action Creators？

Question

在一个典型的 React/Redux 代码库中，你有像这样的 action creator 函数:

Actions.js:

export const addFoo = foo => ({ foo, type: 'ADD_FOO' });

然后您使用 connect 创建该函数的一个版本，该函数分派(dispatch)操作，并使其可用于组件:

Component.js:

import { addFoo } from 'Actions';
const mapPropsToDispatch = { addFoo };
const SomeComponent = connect(mapStateToProps, mapPropsToDispatch)(
  ({ addFoo }) =>
      <button onClick={() => addFoo(5)}>Add Five</button>;
)

我在想，与其将每个 Action 创建者映射到使用它们的每个组件的 connect 中的分派(dispatch)版本，不如“预连接”会不会更简单、更清晰"提前所有 Action 创作者:

Store.js:

import { createStore } from 'redux'
const store = createStore(reducer, initialState);
export const preConnect = func => (...args) => store.dispatch(func(...args));

Actions.js (2.0):

import { preConnect } from 'Store';
export const addFoo = preConnect(foo => ({ foo, type: 'ADD_FOO' }));

Component.js (2.0):

import { addFoo } from 'Actions';

const SomeComponent = () =>
   <button onClick={() => addFoo(5)}>A Button</button>;

我是否遗漏了为什么这样做不是一个好主意的任何明显原因？

Answer 1

您在此处的代码中引用了 dispatch() 函数:

export const preConnect = func => (...args) => store.dispatch(func(...args));

但是在 React-Redux 的世界中，我们的组件内部没有直接引用 dispatch() 函数。那么这是怎么回事？

当我们将 Action 创建器传递给 connect() 函数时，connect() 函数会对 Action 对象内部的函数执行特殊操作。

export default connect(mapStateToProps, { selectSong })(SongList);

connect() 函数本质上是将操作包装到一个新的 JavaScript 函数中。当我们调用新的 JavaScript 函数时，connect() 函数将自动调用我们的 Action 创建器，执行返回的 Action 并自动调用 dispatch() 函数对我们来说。

因此，通过将 action creator 传递给 connect() 函数，每当我们调用添加到 props 对象的 action creator 时，该函数将自动执行返回的操作并把它丢给我们的调度函数。

所有这些都在幕后发生，您在使用 connect() 函数时实际上不必考虑它。

这就是 redux 的工作原理，有很多连接，这是我相信人们对这个库的主要提示之一，所以我理解你想要预配置它的一些设置的心情，在这个在我看来，这是 Redux 设置中最困难的部分，即连接 Action 创建者和缩减器。

我认为预配置的问题是开发人员仍然需要知道如何编写这些函数，然后手动将它们 Hook 在一起，而不是在其他状态管理库中如何完成，如果它被一些人拿走了预配置过程的类型，我认为 Redux 变得更神奇，更难排除故障。同样，action creators 和 reducers 是将 Redux 架构组合在一起的最大挑战，因此掌握并了解如何解决该区域的问题几乎需要手动设置。