Redux “为什么不呢？”；“预连接”；重做动作创作者？

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

Actions.js:

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

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

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

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

import { addFoo } from 'Actions';

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

然后使用

connect

创建该函数的一个版本，用于分派操作，并使其可供组件使用：

Component.js:

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

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

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

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

import { addFoo } from 'Actions';

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

Actions.js（2.0）：

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

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

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

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

import { addFoo } from 'Actions';

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

Component.js（2.0）：

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

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

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

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

import { addFoo } from 'Actions';

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

从“Actions”导入{addFoo}；
常量SomeComponent=（）=>
addFoo（5）}>A按钮；

---

我是否缺少任何明显的理由来解释为什么这样做是个坏主意？

您在代码中引用了

dispatch（）

函数：

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

但是在React Redux的世界中，没有直接引用组件内部的

dispatch（）

函数。发生了什么事

当我们将动作创建者传递给

connect（）

函数时，

connect（）

函数对动作对象内的函数执行特殊操作

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

connect（）

函数实质上是将动作包装到一个新的JavaScript函数中。当我们调用新的JavaScript函数时，

connect（）

函数将自动调用我们的动作创建者，执行返回的动作，并为我们自动调用

dispatch（）

函数

因此，通过将动作创建者传递到

connect（）

函数中，每当我们调用添加到props对象中的动作创建者时，该函数将自动执行返回的动作，并将其放入分派函数中

所有这些都是在幕后发生的，在使用

connect（）

函数时，您不必考虑这些

这就是redux的工作原理，有很多连线，我相信这是这个库周围人们的主要抱怨之一，所以我理解你想要预先配置一些设置的想法，在我看来，redux设置中最困难的部分是连线动作创建者和还原者

---

我认为预配置的问题是，开发人员仍然需要知道如何编写这些函数，然后手动将它们连接在一起，而不是在其他状态管理库中如何完成，如果这被某种类型的预配置过程所取消，我认为Redux变得更神奇，更难解决问题。同样，动作创造者和还原者是整合Redux体系结构的最大挑战，因此掌握并知道如何解决该领域的问题几乎需要手动设置。

为了确保我理解，唯一的缺点是代码会变得更加模糊和“神奇”？这是一个合法的缺点，不试图最小化它，但就是这样？