Redux 是一个流行的 JavaScript 应用程序状态管理库,它提供了一种可预测的方式来管理应用程序的状态。Redux 通过一系列的 action 来更新状态,但是当多个 action 同时发生时,Redux 会如何协调它们呢?
Redux 中的 action
在 Redux 中,action 是一个简单的 JavaScript 对象,它描述了应用程序中的一个事件。每个 action 都必须有一个 type 属性,它指定了 action 的类型。例如,下面是一个简单的 action:
{
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux',
completed: false
}
}这个 action 的类型是 ADD_TODO,它表示要向应用程序中添加一个新的待办事项。
Redux 中的 reducer
在 Redux 中,reducer 是一个纯函数,它接收当前的状态和一个 action,然后返回一个新的状态。reducer 的作用是根据 action 来更新应用程序的状态。下面是一个简单的 reducer:
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
--------------
-
--------
------ -----
-
-这个 reducer 接收一个 state 和一个 action,如果 action 的类型是 ADD_TODO,那么它会将新的待办事项添加到 state 中。否则,它会返回原来的 state。
Redux 中的 store
在 Redux 中,store 是一个包含应用程序状态的对象。store 通过 getState() 方法来获取当前的状态,通过 dispatch(action) 方法来分发 action,通过 subscribe(listener) 方法来监听状态的变化。下面是一个简单的 store:
import { createStore } from 'redux'
import todos from './reducers/todos'
const store = createStore(todos)这个 store 包含了一个 todos reducer,并且可以通过 store.dispatch(action) 来分发 action。
Redux 中的 action 协调
当多个 action 同时发生时,Redux 会按照它们发生的顺序来协调它们。例如,假设我们有两个 action,分别是添加待办事项和删除待办事项:
-- -------------------- ---- -------
----- ------------- - -
----- -----------
-------- -
--- --
----- ------ -------
---------- -----
-
-
----- ---------------- - -
----- --------------
-------- -
--- -
-
-如果我们先分发添加待办事项的 action,然后再分发删除待办事项的 action,那么 Redux 会先执行添加待办事项的 reducer,然后再执行删除待办事项的 reducer。因此,如果我们在添加待办事项的 reducer 中检查待办事项是否存在,然后在删除待办事项的 reducer 中删除它,那么这个操作是安全的。
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
-- ---------------- -- ------- --- ------------------- -
------ -----
-
------ -
---------
--------------
-
---- --------------
------ ----------------- -- ------- --- ------------------
--------
------ -----
-
-在这个例子中,我们在添加待办事项的 reducer 中检查待办事项是否存在,然后在删除待办事项的 reducer 中删除它。因此,这个操作是安全的。
总结
Redux 是一个流行的 JavaScript 应用程序状态管理库,它通过一系列的 action 来更新状态。当多个 action 同时发生时,Redux 会按照它们发生的顺序来协调它们。为了保证多个 action 的安全性,我们可以在 reducer 中进行检查和操作。
参考资料
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65c09eeaadd4f0e0ffaa1841