action-reducer 链如何在 react-redux 中工作 [英] How does action-reducer chain work in react-redux

问题描述

所以我一直在研究

+1 重要:

有时我看到开发人员错过了导致问题的 reducer 的返回值.处理操作文档中有两件重要的事情需要注意:

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

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

我希望澄清！

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?

解决方案

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:

1. 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.

2. 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!

这篇关于action-reducer 链如何在 react-redux 中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！