Redux 操作

Redux 是一种同步的状态管理工具，用于 Web 应用程序的状态管理。它能够帮助开发人员更轻松地跟踪应用程序的状态。

安装

要安装 Redux，请使用以下命令：

npm install redux

创建 Store

Store 是 Redux 的核心。它是用于存储应用程序状态的容器。

要创建一个存储，请使用以下代码：

import { createStore } from 'redux';

const store = createStore(reducer);

创建 Reducer

Reducer 是一个函数。它定义了要如何修改应用程序的状态。

以下是一个 Reducer 函数的例子：

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;
    }
}

操作 State

当我们需要更新应用程序状态时，我们需要分派一个 action。一个 action 是一个对象，它描述了一个事件。

以下是一个 action 的例子：

const incrementAction = {
    type: 'INCREMENT'
};

要将此操作分派到存储，请使用以下代码：

store.dispatch(incrementAction);

监听 State 的变化

要监听存储器中的状态更改，请使用以下代码：

store.subscribe(() => {
    console.log(store.getState());
});

在上面的示例中，每次存储的状态更改时，它都会在控制台中打印。

总结

Redux 是一个非常重要的状态管理工具。它帮助我们更好地跟踪我们的应用程序状态并更轻松地更新它。对于大型和复杂的 Web 应用程序，Redux 是一个必备的工具。