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

IT技术 javascript reactjs react-redux
2021-05-07 22:06:16

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

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

做所有的魔法吗?

1个回答

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

connect()函数将 React 组件连接到 Redux 存储。它为它的连接组件提供它需要从存储中获取的数据片段,以及它可以用来将动作分派到存储的函数。

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

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

在基于reducerdispatch({type: 'STRING', payload: 'your data'})switch语句中会找到合适type的状态来改变。在您的减速器结束时,返回的值将导致您的组件重新渲染。

用一个相当简单的绘制我刚做的:

还原

+1 重要:

有时我看到开发人员错过了减速器的返回值,这会导致问题。处理操作文档中需要注意两件重要的事情

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

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

我希望澄清!