探索Redux：JavaScript应用的预测状态容器

最新推荐文章于 2024-08-28 09:19:48 发布

夏庭彭Maxine

最新推荐文章于 2024-08-28 09:19:48 发布

阅读量287

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00050/article/details/138651202

版权

探索Redux：JavaScript应用的预测状态容器

reduxreduxjs/redux: Redux 是一个用于 JavaScript 的状态管理库，可以用于构建复杂的前端应用程序，支持多种状态管理和数据流模式，如 Flux，MVC，MVVM 等。项目地址:https://gitcode.com/gh_mirrors/re/redux

Redux是一个用于JavaScript应用程序的预测性状态管理库。它使你的应用行为保持一致性，并能在不同环境下运行（客户端、服务器端和原生环境），同时还提供出色的测试友好性。除此之外，Redux还提供了诸如实时代码编辑结合时间旅行调试器等开发者工具，极大地提升了开发体验。

你可以将Redux与React一起使用，或者与其他任何视图库搭配。Redux的核心极其小巧（包括依赖在内仅2kB），并且拥有丰富且强大的生态系统插件。

我们官方推荐的Redux开发方式是使用Redux Toolkit。它围绕Redux核心构建，包含了我们认为构建Redux应用时必不可少的包和函数。Redux Toolkit内置了我们的最佳实践，简化了许多Redux任务，避免了常见的错误，让编写Redux应用变得更加简单。

安装

创建一个React Redux应用

推荐的新应用起点是使用我们的Redux Toolkit + TypeScript的Vite模板，或者使用Next.js的with-redux模板创建新的Next.js项目。这两个模板都已经正确配置了Redux Toolkit和React-Redux，并附带了一个演示如何使用Redux Toolkit多种功能的小示例应用。

# 使用Vite与Redux+TS模板
# （使用`degit`工具克隆并提取模板）
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# 使用Next.js的`with-redux`模板
npx create-next-app --example with-redux my-app

对于React Native，目前我们没有官方模板，但推荐以下两个模板：

https://github.com/rahsheen/react-native-template-redux-typescript
https://github.com/rahsheen/expo-template-redux-typescript

要安装Redux Toolkit及其相关的react-redux库，可以执行：

npm install @reduxjs/toolkit react-redux

如果只需要安装Redux核心库本身，则执行：

npm install redux

更多安装细节，请查看安装文档页面。

文档

Redux的核心文档位于https://redux.js.org，其中包括完整的Redux教程以及关于通用Redux模式的使用指南：

Redux Toolkit的文档可访问https://redux-toolkit.js.org，包括所有包含在Redux Toolkit中的API的参考和使用指南。

学习Redux

Redux基础知识教程

Redux Essentials 是一个"自上而下"的教程，教你"如何正确地使用Redux"，使用我们最新的推荐API和最佳实践。建议从这里开始学习。

Redux基础教程

Redux Fundamentals 是一个"自底向上"的教程，教你"Redux是如何工作的"，不涉及任何抽象，解释了标准Redux使用模式的原因。

帮助和讨论

#redux频道 是Reactiflux Discord社区 的官方资源，是所有与学习和使用Redux相关问题的支持和讨论平台。Reactiflux是一个很好的交流、提问和学习的地方，欢迎加入！

在继续之前

Redux是一个有用的状态管理工具，但在决定是否使用它时，也应考虑它是否适合你的场景。不要因为别人说你应该使用就去用，而是花点时间理解使用Redux的潜在好处和权衡。

在决定何时集成Redux到你的应用中时，应该考虑以下几个建议：

你的数据量适度，并且会随着时间变化
你需要单一的数据源来存储状态
你发现将所有状态保留在顶级组件中已经不够用了

这些指导原则主观且模糊，但这是有道理的。对每个用户和每个应用来说，什么时候应该使用Redux都是不同的。

更多信息，请查看以下链接：

简单示例

全局状态树存储在一个单一的_"store"对象中。改变状态树唯一的方式是创建一个描述发生了什么的"action"对象，并将其 "dispatch" 到 store。为了指定如何响应action更新状态，你需要编写纯函数"reducers"_，基于旧状态和动作计算出新状态。

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中编写"修改"逻辑。它
      // 其实并没有实际改变状态，因为它使用了Immer库，
      // 该库检测到“草稿状态”的更改，然后根据这些更改产生一个新的
      // 不可变的状态
      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行为和数据流。