Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助我们管理应用程序的数据流，使得应用程序更易于测试、维护和扩展。在 Redux 中，我们通过创建一个单一的存储来管理应用程序的状态，这个存储被称为“store”。
在本篇文章中，我们将深入探讨 Redux 中的 createStore 方法，它是创建 Redux 应用程序存储的关键方法。我们将学习如何使用 createStore 方法创建一个简单的 Redux 应用程序，并了解一些与 createStore 相关的重要概念和技术。
Redux 应用程序的基础结构
在讨论 createStore 方法之前，我们需要了解 Redux 应用程序的基础结构。Redux 应用程序的核心是一个单一的存储，它包含了应用程序的所有状态和逻辑。我们可以通过创建一个存储来初始化 Redux 应用程序，并使用 createStore 方法来创建这个存储。
Redux 应用程序中的状态是不可变的，这意味着我们不能直接修改状态。相反，我们需要通过派发一个动作来更新状态。动作是一个描述状态变化的简单对象，它包含了一个类型和一些可选的数据。我们可以通过创建一个动作来触发状态的更新，并使用 store.dispatch(action) 方法来派发这个动作。
当我们派发一个动作时，Redux 应用程序将自动调用一个叫做“reducer”的函数，该函数接收当前状态和动作作为参数，并返回一个新的状态。reducer 函数必须是纯函数，它不能修改原始状态，而是必须返回一个新的状态。我们可以通过创建一个 reducer 函数来定义状态的更新逻辑，并使用 createStore 方法将这个 reducer 函数与存储关联起来。
使用 createStore 方法创建 Redux 应用程序
现在，让我们来看看如何使用 createStore 方法创建一个 Redux 应用程序。首先，我们需要安装 Redux 库。可以使用 npm 或 yarn 来安装 Redux：
--- ------- ----- - -- ---- --- -----
安装完成后，我们可以在应用程序中导入 Redux 库：
------ - ----------- - ---- --------
接下来，我们需要定义一个 reducer 函数来处理状态的更新逻辑。在本例中，我们将创建一个简单的计数器应用程序，它包含一个计数器状态和两个动作：增加计数器和减少计数器。我们可以使用 switch 语句来处理不同类型的动作：
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-在上面的代码中，我们定义了一个名为 counter 的 reducer 函数。该函数接收两个参数：当前状态和一个动作对象。如果动作的类型是 INCREMENT，我们将返回一个新的状态，该状态为当前状态加上 1；如果动作的类型是 DECREMENT，我们将返回一个新的状态，该状态为当前状态减去 1；否则，我们将返回原始状态。注意，我们使用 ES6 的默认参数语法来指定初始状态为 0。
接下来，我们可以使用 createStore 方法来创建一个存储，并将 reducer 函数与存储关联起来：
----- ----- - ---------------------
在上面的代码中，我们创建了一个名为 store 的存储，并将 counter 函数作为参数传递给 createStore 方法。现在，我们可以通过 store.getState() 方法来获取当前状态，通过 store.dispatch(action) 方法来派发动作，以及通过 store.subscribe(listener) 方法来监听状态的变化。
示例代码
下面是一个完整的计数器应用程序示例代码：
------ - ----------- - ---- --------
-- -- ------- --
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-- ----
----- ----- - ---------------------
-- ------
------------------ -- -
------------------------------
---
-- ----
---------------- ----- ----------- --- -- -- -
---------------- ----- ----------- --- -- -- -
---------------- ----- ----------- --- -- -- -在上面的代码中，我们首先定义了一个名为 counter 的 reducer 函数，然后使用 createStore 方法创建了一个存储，并将 counter 函数作为参数传递给 createStore 方法。接下来，我们使用 store.subscribe(listener) 方法来监听状态的变化，并在状态变化时输出当前状态。最后，我们通过 store.dispatch(action) 方法来派发动作，并输出当前状态。
总结
在本篇文章中，我们了解了 Redux 应用程序的基础结构，并深入探讨了 createStore 方法的使用。我们学习了如何使用 createStore 方法创建一个简单的 Redux 应用程序，并了解了一些与 createStore 相关的重要概念和技术。希望这篇文章对你有所帮助，让你更好地理解 Redux 应用程序的工作原理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d222e5add4f0e0ffa98154