时间戳

首页 > 解决方案 > react-redux 中 action-reducer 链如何工作

javascript - react-redux 中 action-reducer 链如何工作

问题描述

所以我一直在研究https://codesandbox.io/s/9on71rvnyo以了解 Redux 的工作原理。我到了那个部分components/VisibilityFilters.js。我看到了setFilter(currentFilter)，什么叫做动作redux/actions.js。但对我来说，理解到此为止。我不明白这个动作是如何与减速器联系起来的。这只是一个函数调用！？做

export default connect(
  mapStateToProps,
  { setFilter }
)(VisibilityFilters);

做所有的魔法？

标签： javascriptreactjsreact-redux

解决方案

第一件事是connect()在你的组件和你的 Redux 存储之间建立连接。这就是为什么您要导出为connect(mapStateToProps, { actionName })(ComponentName);. 正如connect()文档所述：

该connect()函数将 React 组件连接到 Redux 存储。它向其连接的组件提供它需要从存储中获取的数据片段，以及它可以用来向存储分派操作的功能。

因此，从您的组件中，您正在调用函数 - 操作 - 您创建的内容随着dispatch()状态更改而调度。正如dispatch()文件所述：

调度一个动作。这是触发状态更改的唯一方法。store 的 reduce 函数将与当前getState()结果和给定动作同步调用。它的返回值将被视为下一个状态。将从现在开始返回getState()，并立即通知更改侦听器。

在reducer 的基础上会找到合适dispatch({type: 'STRING', payload: 'your data'})的声明来改变状态。最后，reducer 返回的值将导致组件重新渲染。switchtype

用一个相当简单的画出我刚刚做的：

还原

+1 重要：

有时我看到开发人员错过了导致问题的 reducer 的返回值。处理操作文档中有两点需要注意：

  1. 我们不会改变状态。我们用Object.assign(). Object.assign(state, { visibilityFilter: action.filter })也是错误的：它会改变第一个参数。您必须提供一个空对象作为第一个参数。您还可以启用对象扩展运算符提案来{ ...state, ...newState }代替编写。

  2. 我们在默认情况下返回之前的状态。对于任何未知操作，返回之前的状态很重要。

我希望澄清！

推荐阅读