Question

我已经使用React-Redux-Typescript堆栈已有一段时间了，到目前为止，我一直很喜欢它。但是，由于我是Redux的新手，所以一直在想这个主题。 调度Redux动作（和重击）是否被认为是昂贵的操作，应该谨慎使用，还是应该与setState一样使用？

让我们说Redux状态只有一个化简器来管理用户信息：

this.auth.isLoggedIn

要更改这些字段，可以说我们有const initialState = { firstName: '', lastName: '' }，setFirstName等操作，只是为了简单起见。

假设在视图中setLastName中有一个输入元素：

render()

考虑到<input onChange={this.firstNameInputChangeListener} placeholder="First Name"/>已映射到组件：

setFirstName

每次输入有变化时，最好调度一个动作：

export default connect(state => state, { setFirstName })(ThisComponent);

或者创建本地组件状态，将状态绑定到变更侦听器并仅在提交表单时才调度操作是更好的选择：

public firstNameInputChangeListener = (event) => {
  this.props.setFirstName(event.target.value);
}

你们怎么看？

Answer 1

实际分派动作的成本为：

通过每个中间件传递操作
执行根缩减器功能，如果您使用的是combineReducers()，则它可能会拆分为多个切片缩减器
调用所有商店订阅回调

通常，中间件和reducer逻辑不是瓶颈-它更新的UI可能很昂贵。使用React-Redux，每个连接的组件实例都是一个单独的订户。如果您有一个具有10000个已连接ListItem的已连接列表，则为10001个订阅者。

Redux常见问题解答中包含讨论app performance and scalability和ways to cut down on subscriber notifications的条目。

特别是对于表单，应用程序的其余部分不太可能在表单中的每次按键操作上进行更新。为此，对调度进行去抖动是非常合理的。我的博客帖子Practical Redux, Part 7: Form Change Handling and Data Editing显示了一个可重用的组件，该组件可以包装输入或表单以在UI中启用快速更新，同时还取消Redux操作的分派。

调度Redux操作是否被视为昂贵？

1 个答案: