在 Redux 中,Store 是一个非常重要的概念,它是整个应用的核心,用于管理应用的状态。在本文中,我们将深入剖析 Redux 中 Store 的创建与初始化过程,帮助读者更好地理解 Redux 的工作原理。
Store 的创建
在 Redux 中,Store 是通过 createStore 函数创建的。它接受三个参数:reducer、preloadedState 和 enhancer。
import { createStore } from 'redux'; const store = createStore(reducer, preloadedState, enhancer);
其中,reducer 是一个函数,用于处理应用状态的变化,preloadedState 是应用的初始状态,enhancer 是一个函数,用于增强 Store 的功能。
在 createStore 函数内部,它会调用 reducer 函数,并将 preloadedState 作为参数传递进去,以初始化应用的状态。同时,它还会返回一个对象,这个对象就是我们的 Store。
Store 的初始化
在创建完 Store 之后,我们需要对它进行初始化。在 Redux 中,Store 的初始化过程包括三个步骤:绑定 reducer、订阅状态变化和派发初始 action。
绑定 reducer
在创建 Store 时,我们需要传入一个 reducer 函数。这个函数负责处理应用状态的变化,根据不同的 action 类型来更新应用的状态。在初始化 Store 时,我们需要将这个 reducer 函数绑定到 Store 上。
store.replaceReducer(reducer);
在 Redux 中,我们可以使用 replaceReducer 函数来绑定 reducer。它接受一个参数,就是我们的 reducer 函数。
订阅状态变化
在 Redux 中,我们可以使用 subscribe 函数来订阅应用状态的变化。这个函数接受一个回调函数作为参数,每当状态发生变化时,这个回调函数就会被调用。
store.subscribe(() => { console.log('State changed:', store.getState()); });
在初始化 Store 时,我们可以使用 subscribe 函数来订阅状态变化。这样,我们就可以在应用状态发生变化时,及时地进行响应。
派发初始 action
在 Redux 中,我们可以使用 dispatch 函数来派发 action。当我们创建 Store 后,我们需要派发一个初始的 action,以便让 reducer 函数可以初始化应用状态。
store.dispatch({ type: '@@redux/INIT' });
在初始化 Store 时,我们可以使用 dispatch 函数来派发初始的 action。这个 action 的类型是 Redux 内部定义的特殊类型,用于初始化应用状态。
示例代码
下面是一个简单的示例代码,用于演示如何创建和初始化 Store。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- -- -- ------- -- -------- -------------------- - -- ------- - ------ ------------- - ---- ------------ ------ ----- - -- ---- ------------ ------ ----- - -- -------- ------ ------ - - -- -- ----- ----- ----- - ---------------------------- -- ------ ------------------ -- - ------------------ ---------- ------------------ --- -- ---- ------ ---------------- ----- -------------- --- -- -- ------ ---------------- ----- ----------- --- ---------------- ----- ----------- --- ---------------- ----- ----------- ---
在这个示例代码中,我们首先定义了一个 reducer 函数,用于处理应用状态的变化。然后,我们使用 createStore 函数创建了一个 Store,并将这个 reducer 函数传递进去。接着,我们使用 subscribe 函数订阅了应用状态的变化,并使用 dispatch 函数派发了一个初始的 action。最后,我们又使用 dispatch 函数派发了几个 action,以便更新应用状态。在每次派发 action 后,我们都会输出最新的应用状态。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d3d9eaa941bf7134747b14