英文:
How does action-reducer chain work in react-redux
问题
我一直在研究 https://codesandbox.io/s/9on71rvnyo 以了解Redux的工作原理。我来到了components/VisibilityFilters.js部分。我看到在setFilter(currentFilter)上调用了redux/actions.js中的一个动作。但对我来说，理解到这里就停止了。我不明白这个动作如何与Reducers相关联。这只是一个函数调用吗？以下代码是否完成了所有的工作？
export default connect(
mapStateToProps,
{ setFilter }
)(VisibilityFilters);
英文:
So I have been looking into https://codesandbox.io/s/9on71rvnyo to understand how Redux works. I got to the part components/VisibilityFilters.js. I see on setFilter(currentFilter), what calls an action in redux/actions.js. But for me the understanding stops here. I don't understand how this action connects with the reducers. This just an function call!? Does
export default connect(
mapStateToProps,
{ setFilter }
)(VisibilityFilters);
do all the magic?
答案1
得分: 4
第一件事是，connect() 方法建立了你的组件与 Redux 存储之间的连接。这就是为什么你要导出为 connect(mapStateToProps, { actionName })(ComponentName);。正如 connect() 文档所述：
> connect() 函数将 React 组件连接到 Redux 存储。它为连接的组件提供了来自存储中需要的数据片段，以及可以用于向存储分发操作的函数。
因此，从你的组件中，你正在调用函数 - 也就是你创建的操作 - 它们使用 dispatch() 分发状态更改。正如 dispatch() 文档所述：
> 分发一个操作。这是触发状态更改的唯一方式。存储的减少函数将与当前的 getState() 结果和给定的操作同步调用。它的返回值将被视为下一个状态。从现在开始，它将从 getState() 返回，并且立即通知更改监听器。
在基于 dispatch({type: 'STRING', payload: 'your data'}) 的 reducer 中，switch 语句将查找适当的 type 以更改状态。最终，从你的 reducer 返回的值将导致组件重新渲染。
通过一个相当简单的示意图，我刚刚制作了：
+1 重要提示:
有时我看到开发人员忽略了 reducer 的返回值，这可能会导致问题。从 处理操作 文档中有两个重要的注意事项：
- > 我们不要改变状态。我们使用
Object.assign()创建一个副本。Object.assign(state, { visibilityFilter: action.filter })也是错误的：它将改变第一个参数。你必须提供一个空对象作为第一个参数。你还可以启用对象扩展运算符提案，以写成{ ...state, ...newState }。 - > 对于任何未知操作，我们返回先前的状态很重要。
希望这能澄清一些问题！
英文:
The first thing is that connect() makes a connection between your component and your Redux store. That's why you are exporting as connect(mapStateToProps, { actionName })(ComponentName);. As the connect() documentation states:
> The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
Thus from you component you are calling the function - actions - what you created which are dispatching with dispatch() a state change. As dispatch() documentation states:
> Dispatches an action. This is the only way to trigger a state change. The store's reducing function will be called with the current getState() result and the given action synchronously. Its return value will be considered the next state. It will be returned from getState() from now on, and the change listeners will immediately be notified.
In the reducer based on the dispatch({type: 'STRING', payload: 'your data'}) the switch statement will find the proper type to change the state. At the end from your reducer the returned value will be causing a rerender in your component.
With a fairly simple draw what I just made:
+1 important:
Sometimes I see that developers are missing out the return value from the reducer which causes issues. There are 2 important things to note from Handling Actions documentation:
- > We don't mutate the state. We create a copy with
Object.assign().Object.assign(state, { visibilityFilter: action.filter })is also wrong: it will mutate the first argument. You must supply an empty object as the first parameter. You can also enable the object spread operator proposal to write{ ...state, ...newState }instead. - > We return the previous state in the default case. It's important to return the previous state for any unknown action.
I hope that clarifies!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论