![](/img/trans.png)
[英]how does cb && 'function' === typeof cb && cb(data) work in the Action(React-redux) with redux-thunk?
[英]How does action-reducer chain work in react-redux
所以我一直在研究https://codesandbox.io/s/9on71rvnyo以了解 Redux 的工作原理。 我到了部分components/VisibilityFilters.js
。 我在setFilter(currentFilter)
上看到,在redux/actions.js
调用了一个动作。 但对我来说,理解到此为止。 我不明白这个动作是如何与减速器连接的。 这只是一个函数调用!? 做
export default connect(
mapStateToProps,
{ setFilter }
)(VisibilityFilters);
做所有的魔法吗?
首先是connect()
在您的组件和您的 Redux 存储之间建立连接。 这就是为什么您要导出为connect(mapStateToProps, { actionName })(ComponentName);
. 正如connect()
文档所述:
connect()
函数将 React 组件连接到 Redux 存储。 它为它的连接组件提供它需要的来自商店的数据片段,以及它可以用来将动作分派到商店的函数。
因此,从您的组件中,您正在调用函数 - 动作 - 您创建的内容正在使用dispatch()
进行状态更改。 正如dispatch()
文档所述:
调度一个动作。 这是触发状态更改的唯一方法。 将使用当前的
getState()
结果和给定的操作同步调用 store 的 reduce 函数。 它的返回值将被视为下一个状态。 它将从现在开始从getState()
返回,并且将立即通知更改侦听器。
在基于dispatch({type: 'STRING', payload: 'your data'})
的 reducer 中, switch
语句会找到合适的type
来改变状态。 在您的减速器结束时,返回的值将导致您的组件重新渲染。
用一个相当简单的绘制我刚做的:
+1 重要:
有时我看到开发人员错过了减速器的返回值,这会导致问题。 从处理操作文档中需要注意两件重要的事情:
我们不会改变状态。 我们使用
Object.assign()
创建一个副本。Object.assign(state, { visibilityFilter: action.filter })
也是错误的:它会改变第一个参数。 您必须提供一个空对象作为第一个参数。 您还可以启用对象扩展运算符建议来编写{ ...state, ...newState }
。
我们在默认情况下返回先前的状态。 为任何未知操作返回之前的状态很重要。
我希望澄清!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.