Question

在典型的React / Redux代码库中，您有动作创建器功能，如：

Actions.js：

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

然后使用connect创建该函数的一个版本，该函数调度该操作，并使其可用于组件：

Component.js：

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

我在考虑，而不是将每个动作创建者映射到其使用它们的每个组件的connect内的调度版本，如果你只是“预先连接”所有的，那么它不会更简单和更清洁你的行动创作者提前：

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()函数。那是怎么回事？

当我们将动作创建者传递到connect()函数中时，connect()函数对action对象内部的函数执行特殊操作。

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

connect()函数实际上将动作包装到一个新的JavaScript函数中。当我们调用新的JavaScript函数时，connect()函数将自动调用我们的动作创建者，执行返回的动作，并自动为我们调用dispatch()函数。

因此，通过将动作创建者传递到connect()函数中，每当我们调用添加到props对象中的动作创建者时，该函数将自动执行要返回的动作并将其扔到调度函数中为我们。

所有这些都是在幕后发生的，使用connect()函数时您不必真正考虑它。

这就是redux的工作方式，存在很多布线问题，这是我认为人们对这个库的主要抱怨之一，因此，我确实理解您希望预先配置它的一些设置的想法。在我看来，这是Redux设置中最困难的部分，即连接动作创建者和减速器。

我正在考虑的预配置问题是，开发人员仍然需要知道如何编写这些功能，然后手动将它们挂钩，而不是在其他状态管理库中如何完成，以及是否被某些人拿走了这种类型的预配置过程，Redux变得更加神奇，而且我认为更难进行故障排除。同样，动作创建者和简化者是组合Redux架构的最大挑战，因此掌握和了解如何对该区域进行故障排除几乎需要手动设置。

为什么不“预先连接”Redux Action Creators？

1 个答案: