入门 Redux

文档
https://cn.redux.js.org/introduction/getting-started

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。

可以帮助你开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑。

可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。

安装

Redux Toolkit

Redux Toolkit 是我们官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 建立在我们建议的最佳实践中，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易。

RTK 包含了有助于简化许多常见场景的工具，包括 配置 Store， 创建 reducer 并编写 immutable 更新逻辑， 甚至还包含 一次性创建整个 State 的 “Slice”。

无论你是一个想要开发第一个 Redux 应用的新手，还是想要简化已有应用经验老道的老手，Redux Toolkit 都能帮你写出更好的 Redux 代码.

Redux Toolkit 提供 NPM 软件包，可与模块捆绑器或 Node 应用程序一起使用，安装方式如下：

# NPMnpm install @reduxjs/toolkit# Yarnyarn add @reduxjs/toolkit

创建一个 React Redux 应用

官方推荐的使用 React 和 Redux 创建新应用的方式是使用 官方 Redux+JS 模版或 Redux+TS 模板，它基于 Create React App，利用了 Redux Toolkit 和 Redux 与 React 组件的集成.

# Redux + Plain JS templatenpx create-react-app my-app --template redux# Redux + TypeScript templatenpx create-react-app my-app --template redux-typescript

Redux 核心库

Redux 核心库同样有 NPM 软件包，可与模块捆绑器或 Node 应用程序一起使用，安装方式如下：

# NPMnpm install redux# Yarnyarn add redux

还有一个使用方式是通过预编译的 UMD 包，定义了 window.Redux 这个全局变量。UMD 包可以通过 <script> tag 直接使用。

基础示例

应用的整体全局状态以对象树的方式存放于单个 store。 唯一改变状态树（state tree）的方法是创建 action，一个描述发生了什么的对象，并将其 dispatch 给 store。 要指定状态树如何响应 action 来进行更新，你可以编写纯 reducer 函数，这些函数根据旧 state 和 action 来计算新 state。

import { createStore } from 'redux'

/**
 * 这是一个 reducer 函数：接受当前 state 值和描述“发生了什么”的 action 对象，它返回一个新的 state 值。
 * reducer 函数签名是 : (state, action) => newState
 *
 * Redux state 应该只包含普通的 JS 对象、数组和原语。
 * 根状态值通常是一个对象。 重要的是，不应该改变 state 对象，而是在 state 发生变化时返回一个新对象。
 *
 * 你可以在 reducer 中使用任何条件逻辑。 在这个例子中，我们使用了 switch 语句，但这不是必需的。
 * 
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// 创建一个包含应用程序 state 的 Redux store。
// 它的 API 有 { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// 你可以使用 subscribe() 来更新 UI 以响应 state 的更改。
// 通常你会使用视图绑定库（例如 React Redux）而不是直接使用 subscribe()。
// 可能还有其他用例对 subscribe 也有帮助。

store.subscribe(() => console.log(store.getState()))

// 改变内部状态的唯一方法是 dispatch 一个 action。
// 这些 action 可以被序列化、记录或存储，然后再重放。
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

你需要使用 action 这个普通对象来描述发生了什么，而不是直接改变 state。然后，编写一个名为 reducer 的特殊函数，来决定如何基于 action 来更新整个应用的状态树。

在典型的 Redux 应用程序中，只有一个 store 以及一个根 reducer 函数。随着应用程序的增长，您可以将根 reducer 拆分为较小的 reducer，分别在状态树的不同部分上进行运行。这就像在 React 应用程序中只有一个根组件一样，但是它是由许多小组件组成的。

对于简单的计数器应用来说，这种架构看起来过度设计，但是这种模式的优点在于它可以很好地扩展到大型和复杂的应用程序。还可以基于此设计出功能非常强大的开发者工具，因为可以跟踪每个 action 以及状态变更。你可以记录用户会话并仅通过重播每个 action 来重现它们。

Redux Toolkit 示例

Redux Toolkit 简化了编写 Redux 逻辑和设置 store 的过程。 使用 Redux Toolkit，相同的逻辑如下所示：

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit 允许在 reducers 中编写 "mutating" 逻辑。
      // 它实际上并没有改变 state，因为使用的是 Immer 库，检测到“草稿 state”的变化并产生一个全新的
      // 基于这些更改的不可变的 state。
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// 可以订阅 store
store.subscribe(() => console.log(store.getState()))

// 将我们所创建的 action 对象传递给 `dispatch`
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

Redux Toolkit 使我们可以编写更精短且更易于阅读的代码，同时仍然遵循同样的 Redux 规范和数据流。