Redux 是一个流行的 JavaScript 应用程序状态管理库，它提供了一种可预测的状态管理方法，使得应用程序的状态变得可控和可维护。通过 Redux，我们可以将应用程序的状态存储在一个单一的对象中，并使用纯函数来管理状态的变化。本文将通过一个示例来介绍 Redux 的基本理念和用法。
Redux 的基本理念
Redux 的基本理念是将应用程序的状态存储在一个单一的对象中，这个对象被称为“状态树”（state tree）。这个状态树可以被认为是应用程序的“单一真相”，因为它包含了所有的应用程序状态。Redux 通过一个称为“store”的对象来管理状态树，并使用纯函数来处理状态的变化。
Redux 中的状态变化是通过“action”来触发的。一个 action 是一个普通的 JavaScript 对象，它描述了一个状态变化的类型和相关的数据。当一个 action 被触发时，Redux 会将它发送给一个称为“reducer”的纯函数，这个函数会根据 action 的类型来更新状态树，并返回一个新的状态树。
Redux 的另一个重要理念是“单向数据流”。这意味着应用程序的状态只能通过 action 来变化，而不能直接修改状态树。这种限制使得状态变化变得可预测和可控，从而使得应用程序更容易维护和调试。
Redux 示例
下面是一个使用 Redux 的示例应用程序。这个应用程序包含一个计数器，用户可以点击按钮来增加或减少计数器的值。这个应用程序使用了 Redux 来管理计数器的状态。
安装 Redux
要使用 Redux，我们需要先安装它。可以使用 npm 来安装 Redux：
npm install redux
创建 store
我们首先需要创建一个 Redux store，用来管理应用程序的状态树。在这个示例中，我们的状态树只包含一个计数器的值。我们可以使用 Redux 的 createStore 函数来创建 store：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const store = createStore(reducer);在这个代码中，我们首先定义了一个初始状态 initialState，它包含了计数器的初始值。然后我们定义了一个 reducer 函数，这个函数接受一个状态和一个 action，并根据 action 的类型来更新状态。在这个示例中，我们只有两种类型的 action：INCREMENT 和 DECREMENT，它们分别用于增加和减少计数器的值。
最后，我们使用 createStore 函数来创建 Redux store，并将 reducer 函数作为参数传递进去。这个函数返回一个 store 对象，它包含了所有的 Redux API。
使用 store
我们现在可以使用 store 对象来读取和更新计数器的值。在这个示例中，我们将计数器的值显示在页面上，并使用两个按钮来触发 INCREMENT 和 DECREMENT action。
// javascriptcn.com 代码示例
const counter = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
function render() {
const state = store.getState();
counter.innerText = state.count;
}
incrementButton.addEventListener('click', () => {
store.dispatch({ type: 'INCREMENT' });
});
decrementButton.addEventListener('click', () => {
store.dispatch({ type: 'DECREMENT' });
});
render();
store.subscribe(render);在这个代码中，我们首先获取了页面上的元素，并定义了一个 render 函数，用来将状态树中的计数器值显示在页面上。然后我们使用 store.getState 函数来获取当前的状态树，并将计数器的值显示在页面上。
我们还使用了两个按钮来触发 INCREMENT 和 DECREMENT action。当用户点击这些按钮时，我们使用 store.dispatch 函数来发送相应的 action。
最后，我们使用 store.subscribe 函数来订阅 store 的变化，当 store 的状态发生变化时，我们会重新渲染页面。
总结
通过这个示例，我们了解了 Redux 的基本理念和用法。Redux 提供了一种可预测的状态管理方法，使得应用程序的状态变得可控和可维护。通过使用 Redux，我们可以将应用程序的状态存储在一个单一的对象中，并使用纯函数来管理状态的变化。这种方法使得应用程序的状态变化变得可预测和可控，从而使得应用程序更容易维护和调试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65547d94d2f5e1655de3df53