从零开始使用 Redux -- 基础篇

概述

Redux 是一个 JavaScript 状态管理库，用于管理和维护应用程序的状态。它可以帮助你轻松构建和管理复杂应用程序的状态，并使状态管理变得更加简单和可预测。

基本概念

状态管理

状态管理是应用程序中一个重要概念，它是指管理和维护应用程序的状态。应用程序状态是指应用程序中所有组件的当前状态，它包含所有组件的属性值和数据。

单一状态树

Redux 采用单一状态树的结构来管理应用程序的状态。单一状态树是指应用程序的状态存储在一个单一的树形结构中，该树的根节点称为 store。store 中存储着应用程序的全部状态，应用程序中的所有组件都可以通过 store 来获取和更新状态。

纯函数

Redux 要求所有状态更新函数必须是纯函数。纯函数是指一个函数的输出只取决于其输入，并且不会产生任何副作用。这意味着状态更新函数不会改变函数之外的任何状态，也不会产生任何日志或其他副作用。

中间件

Redux 中间件是一种允许你在 Redux 中执行某些操作的机制。中间件可以在 action 被派发到 store 之前或之后执行，也可以在 state 被更新之后执行。这使得你可以执行一些额外的操作，例如记录日志、执行异步请求或将 state 存储到 localStorage 中。

开发者工具

Redux 提供了一个开发者工具，可以帮助你调试和分析应用程序的状态。开发者工具可以显示 store 中的状态树，并允许你查看 action 的派发情况和 state 的变化情况。这使得你可以轻松地跟踪应用程序的状态并发现问题。

使用 Redux

安装 Redux

首先，你需要在你的项目中安装 Redux。你可以使用 npm 或 yarn 来安装 Redux。

npm install redux

创建 store

store 是 Redux 中的核心概念，它是应用程序状态的唯一存储位置。要创建 store，你可以使用 createStore() 函数。

import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const store = createStore(reducer, initialState);

派发 action

action 是应用程序状态变更的一种对象。要派发 action，你可以使用 dispatch() 方法。

store.dispatch({
  type: 'INCREMENT',
});

获取 state

你可以使用 getState() 方法获取 store 中的 state。

const state = store.getState();

订阅 state 变化

你可以使用 subscribe() 方法订阅 state 变化。当 state 发生变化时，订阅函数会被调用。

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

结语

Redux 是一个强大的状态管理库，可以帮助你轻松构建和管理复杂应用程序的状态。如果你正在开发一个 JavaScript 应用程序，那么强烈建议你使用 Redux。