React-redux 中动作和动作类型的含义是什么？

IT技术 reactjs react-redux
2021-04-29 04:58:40

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

  1. 转到constants/actionTypes 文件，创建一个带有动作类型的行
  2. 转到动作并创建动作功能
  3. 在我使用它的每个组件中，我应该为 mapDispatchToProps 创建一个函数
  4. 在reducer中，我应该写一个改变的逻辑

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

// 动作.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

它的代码可以是这样的

// actionsDispatcher.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 传递给 dispatch 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 个不同的文件？

谢谢

2个回答

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

该动机提到CQRS（命令查询责任隔离）分开你如何读取存储（与选择终极版，我重新选择的大风扇）随你怎么写它（用行动和减速器）。

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

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

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

这就是handlers（reducers，middleware）监听事件（actions）的好处，handler只需要知道进程的一小部分，而不是整个进程。

有了事件资源，我们也知道为什么状态有一定的value，而不是只知道状态是什么，文章指出：

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

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

这是一本关于 React 和 Redux 的好书。

常规-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;
  }
}

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

其它你可能感兴趣的问题
上一篇Graphql - 无权访问来自 AWS AppSync Amplify 控制台的错误消息 下一篇NativeBase：在行中生成列