Redux教程

介绍

Redux是一种用于管理JavaScript应用程序状态的开源JavaScript库。它是Flux架构的一种实现，旨在使状态管理更加可预测，易于调试，易于扩展。

Redux通过将应用程序状态存储在一个单一的、可预测的状态树中来通过应用程序中的所有组件进行访问，从而消除了数据在应用程序中的不一致性。它基于纯粹的函数编写，提供了一种处理异步操作的有效方法，并通过强制单向数据流来简化应用程序的逻辑。

核心概念

Store

Store是一个对象，它将应用程序的状态存储在一个单一的、可预测的状态树中。它是Redux应用程序的中央数据仓库，可以用来检索、更新和订阅应用程序的状态信息。

Action

Actions描述了对应用程序状态的更改过程。它们是纯JavaScript对象，其中包含了一个字符串类型的“type”字段以及其他相关数据。

例如：

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
    completed: false
  }
}

Reducer

Reducers是纯函数，它们描述了应用程序状态的更新过程。当将action传递给reducer时，reducer将返回一个新的应用程序状态对象。

例如：

function todoApp(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.payload.id,
          text: action.payload.text,
          completed: action.payload.completed
        }
      ]
    default:
      return state
  }
}

Action Creator

Action Creators是一些函数，它们返回一个Action对象。这个Action对象的"type"字段是由Action Creator指定的。

例如：

function addTodo(id, text, completed) {
    return {
        type: 'ADD_TODO',
        payload: {
            id: id,
            text: text,
            completed: completed
        }
    }
}

Dispatch

Dispatch是将Action传入Reducer的函数。它是唯一可以改变应用程序状态的方式。

例如：

store.dispatch(addTodo(1, 'Learn Redux', false))

应用程序架构

Redux应用程序通常由以下部分组成：

• 一个Store对象，它存储应用程序的状态。
• 一个或多个Action Creators，它们用于创建Action对象。
• 一个或多个Reducer函数，它们描述了如何更新应用程序状态。
• 一个或多个React组件，它们从Store中访问应用程序状态，并渲染UI。

安装

使用npm或yarn安装Redux：

npm install redux

# 或者
yarn add redux

使用

创建一个新的Redux应用程序需要做以下工作：

1. 创建一个Reducer函数

function reducer(state = {}, action) {
    switch (action.type) {
        ['INCREMENT']: {
            return { count: state.count + 1 }
        }
        ['DECREMENT']: {
            return { count: state.count - 1 }
        }
        default: {
            return state;
        }
    }
}

2. 创建一个Store对象

const store = createStore(reducer);

3. 使用Dispatch函数更新状态

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

4. 从Store中获取状态

store.getState(); // { count: 1 }

结论

Redux提供了一种简单、一致的方式来管理应用程序的状态。它是一个强大的工具，可用于所有类型的JavaScript应用程序，从小型应用程序到大型企业应用程序都适用。它有一个活跃的社区和广泛的文档，使学习和使用Redux变得非常容易。