在前端开发中，Redux 是一个非常流行的状态管理库。它可以帮助我们更好地管理应用程序的状态，并且使得状态的变化更加可预测和可控。本文将介绍如何创建 Redux Store，以及一些常见的使用场景。
什么是 Redux Store
在 Redux 中，Store 是应用程序的状态容器。它是一个 JavaScript 对象，包含了应用程序的所有状态。我们可以通过 Store 中提供的一些方法来读取和修改这些状态。在 Redux 中，状态是不可变的，也就是说我们不会直接修改状态，而是通过派发 Action 来触发状态的变化。
创建 Redux Store
创建 Redux Store 需要使用 Redux 提供的 createStore 方法。这个方法接受一个 reducer 函数作为参数，并返回一个 Store 对象。下面是一个简单的示例：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
function reducer(state = {}, action) {
switch (action.type) {
case 'SET_NAME':
return { ...state, name: action.payload };
default:
return state;
}
}
const store = createStore(reducer);在上面的代码中，我们定义了一个 reducer 函数，它接受两个参数：当前的状态和一个 Action 对象。在这个示例中，我们只处理了一个 SET_NAME 的 Action，它会将当前的状态中的 name 属性设置为 Action 中的 payload 属性。如果 Action 的类型不是 SET_NAME，那么我们将返回当前的状态，不做任何修改。
然后我们调用 createStore 方法，并将 reducer 函数作为参数传入。这个方法会返回一个 Store 对象，我们将它保存在 store 变量中。
使用 Redux Store
在创建了 Redux Store 之后，我们可以使用它提供的一些方法来读取和修改应用程序的状态。下面是一些常用的方法：
getState()：获取当前的状态。dispatch(action)：派发一个 Action，触发状态的变化。subscribe(listener)：注册一个监听器，当状态发生变化时会被调用。
下面是一个示例，展示了如何使用这些方法：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
function reducer(state = {}, action) {
switch (action.type) {
case 'SET_NAME':
return { ...state, name: action.payload };
default:
return state;
}
}
const store = createStore(reducer);
// 获取当前的状态
console.log(store.getState()); // {}
// 派发一个 Action
store.dispatch({ type: 'SET_NAME', payload: 'Alice' });
// 获取更新后的状态
console.log(store.getState()); // { name: 'Alice' }
// 注册一个监听器
store.subscribe(() => {
console.log('State changed:', store.getState());
});
// 派发另一个 Action
store.dispatch({ type: 'SET_NAME', payload: 'Bob' });在上面的代码中，我们首先获取了当前的状态，它应该是一个空对象。然后我们派发了一个 SET_NAME 的 Action，将 name 属性设置为 Alice。接着我们又获取了更新后的状态，它应该是一个包含 name 属性的对象。最后我们注册了一个监听器，当状态发生变化时会被调用。最后我们又派发了一个 SET_NAME 的 Action，将 name 属性设置为 Bob，这时监听器就会被调用，并输出更新后的状态。
总结
Redux 是一个非常流行的状态管理库，它可以帮助我们更好地管理应用程序的状态。在 Redux 中，Store 是应用程序的状态容器，它包含了应用程序的所有状态。我们可以通过 createStore 方法创建一个 Redux Store，然后使用 getState、dispatch 和 subscribe 方法来读取和修改应用程序的状态。通过本文的学习，您应该已经掌握了如何创建 Redux Store，以及一些常见的使用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655fac0bd2f5e1655d9deca3