Redux 源码解析之 Store 的创建与初始化-JavaScript中文网-JavaScript教程资源分享门户

在 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。

// www.javascriptcn.com code example
import { createStore } from 'redux';

// 定义 reducer 函数
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// 创建 Store
const store = createStore(counterReducer);

// 订阅状态变化
store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// 派发初始 action
store.dispatch({ type: '@@redux/INIT' });

// 派发 action
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

在这个示例代码中，我们首先定义了一个 reducer 函数，用于处理应用状态的变化。然后，我们使用 createStore 函数创建了一个 Store，并将这个 reducer 函数传递进去。接着，我们使用 subscribe 函数订阅了应用状态的变化，并使用 dispatch 函数派发了一个初始的 action。最后，我们又使用 dispatch 函数派发了几个 action，以便更新应用状态。在每次派发 action 后，我们都会输出最新的应用状态。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3d9eaa941bf7134747b14

Redux 源码解析之 Store 的创建与初始化