Redux 学习笔记第二篇：核心概念拆解

概述

Redux 是一个可预测的状态管理库，用于 JavaScript 应用。它让我们能够以一个可控的方式来管理应用程序的状态，使应用程序更加易于理解、测试和维护。为了使用Redux，我们需要了解它的几个基本元素：Store、State、Action和Reducer。

Store

Store是Redux的核心。它就像是一个容器，存储着应用程序的所有状态。应用程序中所有的组件都可以访问Store中的数据。Store是一个单一的全局对象，这意味着应用程序中的任何组件都可以随时访问它。Store包含了应用程序的所有状态，包括UI的状态、数据的状态以及其他应用程序的状态。

State

State是Store中的数据。它代表了应用程序的当前状态。State可以是任何类型的数据，包括对象、数组、字符串、数字等。State是应用程序中所有组件共享的数据，因此它必须是不可变的。这意味着一旦State被创建，就不能再被修改。

Action

Action是用来更新State的对象。它包含了要更新State的信息。Action是一个简单的JavaScript对象，它必须包含一个type属性，用于标识Action的类型。Action还可以包含其他属性，用于传递数据。当Action被分发到Store时，Store会调用Reducer来更新State。

Reducer

Reducer是一个函数，它接收一个State和一个Action，并返回一个新的State。Reducer根据Action中的信息来更新State。Reducer是纯函数，这意味着它不依赖于任何外部状态，并且总是返回相同的结果。Redux中的Reducer是唯一可以改变State的对象。

以上四个元素就是Redux的核心概念。通过Store、State、Action和Reducer，我们可以构建出可预测、易于维护的Redux应用程序。

实例

为了更好地理解这些概念，我们还是以上一篇博客中提到的图书馆的例子作为基础：一个图书馆中有很多书，图书馆有管理员，我们如果想要找书的时候，可以询问管理员书的具体位置，管理员查询书库中的书籍信息，然后告诉我们书的位置。

在这个例子中，图书馆的书籍就是State，管理员就是Reducer，我们就是Action。当我们想要找书的时候，我们会告诉管理员我们要找的书名，管理员根据书名在书库中查找书籍信息，然后告诉我们书的位置。这个过程可以表示为以下代码：

const state = {
  books: [
    {
      title: 'JavaScript权威指南',
      author: 'David Flanagan',
      location: 'B1'
    },
    {
      title: 'React权威指南',
      author: 'Dan Abramov',
      location: 'B2'
    },
    {
      title: 'Redux权威指南',
      author: 'Mark Erikson',
      location: 'B3'
    }
  ]
};

const action = {
  type: 'FIND_BOOK',
  payload: 'JavaScript权威指南'
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'FIND_BOOK':
      const book = state.books.find(book => book.title === action.payload);
      return {
        ...state,
        selectedBook: book
      };
    default:
      return state;
  }
};

const newState = reducer(state, action);

console.log(newState);

在这个例子中，State是图书馆的书籍信息，Action是我们要找的书名，Reducer是管理员根据书名查找书籍信息，newState是新的State，其中包含了我们要找的书的位置。

总结

Redux是一个强大的状态管理工具，它可以帮助我们构建出可预测、易于维护的应用程序。Redux的核心概念包括Store、State、Action和Reducer。Store是存储应用程序状态的容器，State是Store中的数据，Action是用来更新State的对象，Reducer是用来根据Action更新State的函数。通过这些核心概念，我们可以构建出健壮、易于维护的Redux应用程序。