Redux 是一种非常流行的 JavaScript 应用程序状态管理库。它使用一个单一的存储对象来存储整个应用程序的状态，并使用 reducers 来处理存储对象的更新。在这篇文章中，我们将深入讨论 Redux 中的中间件、store 和 reducers，并提供一些示例代码以帮助您更好地理解。
Redux 中的 store
在 Redux 中，store 是整个应用程序的状态存储对象。它是一个包含应用程序状态的单一 JavaScript 对象。store 可以被读取和更新，但不允许直接修改它。相反，我们使用 reducers 来处理状态的更新。
下面是一个简单的示例，展示了如何创建一个 Redux store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在这个示例中，我们首先定义了一个初始状态，它只包含一个名为 "count" 的属性，并且其值为 0。然后，我们定义了一个 reducer 函数，它根据不同的 action 类型来更新状态。最后，我们使用 createStore 函数来创建一个 Redux store，并将 reducer 传递给它。
Redux 中的 reducers
在 Redux 中，reducer 是一个纯函数，它接收当前状态和一个 action 对象，并返回一个新的状态。reducer 的作用是根据 action 的类型来更新状态。
下面是一个简单的示例，展示了如何编写一个 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-在这个示例中，我们定义了一个初始状态，它只包含一个名为 "count" 的属性，并且其值为 0。然后，我们定义了一个 reducer 函数，它根据不同的 action 类型来更新状态。如果 action 的类型是 "INCREMENT"，则返回一个新的状态对象，它的 count 属性增加了 1。如果 action 的类型是 "DECREMENT"，则返回一个新的状态对象，它的 count 属性减少了 1。如果 action 的类型不是上述两种类型，则返回当前状态对象。
Redux 中的中间件
在 Redux 中，中间件是一个函数，它可以在 action 被发送到 reducer 之前拦截它，并做一些额外的工作，比如日志记录、异步操作等等。中间件可以帮助我们更好地组织和管理应用程序的状态和行为。
下面是一个简单的示例，展示了如何编写一个 Redux 中间件：
const logger = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
};在这个示例中，我们定义了一个 logger 中间件函数，它接收一个 Redux store 对象，并返回一个新的函数。新的函数接收一个 next 参数，它是一个函数，它将 action 发送到 reducer。最后，我们返回一个函数，它接收一个 action 对象，并在发送它到 reducer 之前记录日志，然后将它发送到 reducer。
为了在 Redux 中使用中间件，我们需要使用 applyMiddleware 函数将它们传递给 createStore 函数：
import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(logger));在这个示例中，我们使用 applyMiddleware 函数将 logger 中间件传递给 createStore 函数。
结论
在本文中，我们深入讨论了 Redux 中的中间件、store 和 reducers，并提供了一些示例代码以帮助您更好地理解。使用 Redux 可以帮助我们更好地组织和管理应用程序的状态和行为。如果您正在开发一个大型的 JavaScript 应用程序，那么 Redux 将是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757a898890bd9faa436ef4f