React-redux 中的动作和动作类型是什么意思？答案

【问题标题】：What is the meaning of actions and action types in React-redux?React-redux 中的动作和动作类型是什么意思？
【发布时间】：2020-08-16 18:15:57
【问题描述】：

现在，如果我想更改商店中的值，我应该执行以下步骤：

转到constants/actionTypes文件，创建一个动作类型的行
转到操作并创建操作函数
在我使用它的每个组件中，我应该为 mapDispatchToProps 创建一个函数
在reducer中我应该写一个改变的逻辑

如此复杂的意义何在？如果我只做一个文件的动作会改变状态，那会不会错？例如：

//actions.js

export const setCategories = (payload, setState, currentState) => setState({ categories: payload })
export const addCategory = (payload, setState, currentState) => setState({ categories: [...currentState.category, payload] })

为了让它工作，我可以为所有项目创建几个通用函数

1) getActions，它自动收集来自 actions.js 的所有导出并将它们提供给 mapDispatchToProps，因此我们可以在所有组件中编写

const mapDispatchToProps = getActions

它的代码可以是这样的

//actionDispatcher.js

import * as actions from 'actions'
const getActions = (dispatch, ownProps) => {
  Object.keys(actions).forEach(actionName => {
    const fn = actions[actionName]
    actions[actionName] = payload => dispatch({ action: fn, payload, type: _.toSnakeCase(actionName) })
  }
  return actions
}

这意味着我们从actions.js中传递action的函数

2) setState 与 react 函数类似，但用于 redux 状态

那么在reducer函数中我们就对了

function rootReducer(state = initialState, action) {
  if (action.action) {
    action.action(action.payload, setState, state)
  } 

  // here we make it extandable for ordinary way if required
  if (action.type === '...') {
    // ...  
  }

}

没有别的了……

所以问题是这种方法有什么问题，编码人员只需在一个文件“actions.js”中编写一个函数，然后从任何组件作为 props.someActionName(someParams) 调用它，而不是更改 4 个不同的文件？

谢谢

【问题讨论】：

请参考React-Redux Actions
想象一下，您必须运行诸如 api 调用、错误处理和许多其他功能才能更新状态的一部分。对于更大更复杂的应用程序，使用 Redux 提供的框架来管理和更新全局状态变得更加容易。
@SohanPatil，我真的很抱歉，是什么让你认为我没有读到它？
@Dmitry Reutov 请参考this previous question
@DmitryReutov 如果你真的想把它全部放在一个文件中，并且用例也可以，请参考Redux ducks

标签： reactjs react-redux

【解决方案1】：

Redux 应该让复杂的需求更容易实现，但如果你有简单的需求，那么实现这些需求就会变得更加复杂。

motivation 提到了CQRS（命令查询责任分离），它将您从存储中读取的方式（在带有选择器的 redux 中，我非常喜欢重新选择）与写入方式（使用 action 和 reducer）区分开来)。

actions 和 reducers 是 CQRS 的命令（写）部分，是event sourcing，redux 有时也被称为事件存储。这使您能够为您的事件（操作）添加或删除处理程序（reducer 或中间件），这些事件（操作）可以更新存储、调度其他事件（=操作）、执行异步操作、写入本地存储。

如果您需要在一个函数中完成所有这些事情（异步获取、写入本地存储、调用其他函数（调度其他操作）...），那么该函数将变得无法管理。

即使函数只调用其他函数，它仍然需要知道某个动作的整个过程。但是，如果（例如）您有一个本地存储中间件，可以在某些操作上写入存储，那么其他代码不需要知道如何或何时调用它。因此，当写入本地存储的逻辑发生变化时，它仅限于本地存储中间件。

这就是handler（reducers，middleware）监听事件（action）的优势，handler只需要知道一小部分流程，而不是整个流程。

通过事件资源，我们还知道为什么状态具有一定的价值，而不仅仅是知道状态是什么，article 状态：

但有时我们不仅想看看我们在哪里，我们还想知道我们是如何到达那里的。

事件存储的另一大优势是您可以通过回放事件来重新创建数据。所有这一切都通过 redux def 工具完美完成。

Here 是一本关于 React with Redux 的好书。

【讨论】：

【解决方案2】：

Conventional-redux 是：

用于中小型 React 应用程序的库，它包装了 react-redux 并提供了基于约定优于配置模式的 API，而不会破坏 redux 的兼容性。

您只需定义一个交互器：

 class CounterInteractor {
  // initial state
  defaultState() {
    return 0;
  }

  // actions:
  doubleAsync() {
    setTimeout(() => { this.dispatch('counter:double') }, 500)
  }

  // reduce methods:
  onIncrement() {
    return this.state + 1;
  }

  onDouble() {
    return this.state * 2;
  }
}

并从您连接的组件组件向该交互器分派操作。而已！

【讨论】：