分派 Redux 操作是否被认为是昂贵的? [英] Is dispatching Redux actions considered expensive?
问题描述
我已经使用 React - Redux - Typescript 堆栈有一段时间了，到目前为止我很喜欢它.但是，由于我对 Redux 还很陌生，因此我一直对这个特定主题感到疑惑.分派 Redux 操作(和 thunk)是否被认为是昂贵的操作，应该谨慎使用，还是应该像使用 setState 一样使用它?
I've been using the React - Redux - Typescript stack for a while and I'm loving it so far. However, since I'm quite new to Redux, I've been wondering about this certain topic. Is dispatching Redux actions (and thunks) considered expensive operations and should be used sparingly, or should it be used as much as setState is used?
假设 Redux state 有一个 reducer 来管理用户信息:
Let's say the Redux state has a single reducer that manages user information:
const initialState = {
firstName: '',
lastName: ''
}
为了改变这些字段，假设我们有诸如 setFirstName、setLastName 之类的操作......只是为了简单起见.
And to change these fields, let say we have actions like setFirstName, setLastName, etc... just for simplicity's sake.
假设在视图中，我在 render() 中有一个输入元素:
And let's say in the View I have an input element in render():
<input onChange={this.firstNameInputChangeListener} placeholder="First Name"/>
考虑到 setFirstName 已经映射到组件:
Considering setFirstName has been mapped to the component:
export default connect(state => state, { setFirstName })(ThisComponent);
每次输入发生变化时分派一个动作是否最佳:
Is it optimal to dispatch an action every time there's a change in the input:
public firstNameInputChangeListener = (event) => {
this.props.setFirstName(event.target.value);
}
或者最好创建本地组件状态，将状态绑定到更改监听器并仅在提交表单时分派一个动作:
Or is it better to create local component state, bind the state to the Change Listener and only dispatch an action when the form is submitted:
public state = {
firstName: this.props.firstName;
}
public firstNameInputChangeListener = (event) => {
this.setState({ firstName: event.target.value });
}
public submitButtonListener = (event) => {
this.props.setFirstName(this.state.firstName);
}
大家怎么看?
推荐答案
实际调度一个动作的代价是:
The cost of actually dispatching an action is:
- 通过每个中间件传递动作
- 执行根 reducer 函数，如果你使用
combineReducers() - 调用所有商店订阅回调
通常，中间件和 reducer 逻辑不是瓶颈——它更新 UI 可能很昂贵.使用 React-Redux，每个连接的组件实例都是一个单独的订阅者.如果您有一个包含 10000 个连接的 ListItem 的连接列表，那就是 10001 个订阅者.
Generally, the middleware and the reducer logic are not the bottlenecks - it's updating the UI that can be expensive. With React-Redux, each connected component instance is a separate subscriber. If you have a connected List with 10000 connected ListItems, that's 10001 subscribers.
Redux 常见问题中有条目讨论 应用性能和可扩展性，以及减少订阅者通知的方法.
The Redux FAQ has entries discussing app performance and scalability, and ways to cut down on subscriber notifications.
特别是对于表单，应用的其余部分不太可能需要在表单中的每次击键时更新.为此，对调度进行去抖动是非常合理的.我的博客文章 实用 Redux，第 7 部分:表单更改处理和数据编辑展示了一个可重用的组件，它可以包装输入或表单以在 UI 中实现快速更新，同时还可以消除 Redux 操作的分派.
For a form specifically, it's unlikely that the rest of the app needs to be updated on every keystroke in the form. For that, it's very reasonable to debounce the dispatch. My blog post Practical Redux, Part 7: Form Change Handling and Data Editing shows a reusable component that can wrap inputs or forms to enable fast updates in the UI, while also debouncing the dispatch of a Redux action.
这篇关于分派 Redux 操作是否被认为是昂贵的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
