React-redux使用教程

 

目录

一 React-Redux的应用

3.什么是Redux

4.什么情况下需要使用redux

 二、 最新React-Redux 的流程

1. 安装Redux Toolkit

2.创建一个 React Redux 应用

Redux 核心库​

基础示例

Redux Toolkit 示例

三、使用教程

安装 Redux Toolkit 和 React-Redux​

创建 Redux Store​

为 React 提供 Redux Store​

创建 Redux State Slice​

将 Slice Reducers 添加到 Store 中​

在 React 组件中使用 Redux 状态和操作​

你学到了什么​

---

一 React-Redux的应用

1.学习文档

• 英文文档: https://redux.js.org/
• 中文文档: https://cn.redux.js.org/
• Github: https://github.com/reactjs/redux

2.Redux的需求

1. 状态的集中管理
2. 任意页面与组件之间的数据传递
3. 状态管理的可预测
4. 数据的本地化缓存提升性能

说明：

随着对JavaScript单页应用程序的要求变得越来越复杂，我们的代码必须比以前更多地处理状态。此状态可以包括服务器响应和缓存数据，以及本地创建的尚未保存到服务器的数据。 UI状态的复杂性也在增加，因为我们需要管理活动路线，选定标签，旋钮，分页控件等。 管理这个不断变化的状态是困难的。

如果一个模型可以更新另一个模型，那么一个视图可以更新一个模型，该模型会更新另一个模型，而这又可能导致另一个视图更新。在某种程度上，您不再理解您的应用程序会发生什么情况，因为您已经失去了对其状态的何时，为何和如何的控制。

当系统不透明且不确定时，很难重现错误或添加新功能。 好像这还不够糟糕，请考虑新的要求在前端产品开发中变得常见。作为开发人员，我们需要处理乐观的更新，服务器端渲染，在执行路由转换之前获取数据等等。

我们发现自己试图去处理一个我们以前从来没有处理过的复杂问题，而且我们不可避免地提出这个问题：是放弃的时候了吗？答案是不。

这种复杂性很难处理，因为我们正在混合两个对人类头脑非常难以推理的概念：突变和异步性。我把它们叫做曼托斯和可乐。两者在分离方面都很出色，但它们一起造成一团糟。像React这样的库试图通过去除异步和直接DOM操作来解决视图层中的这个问题。但是，管理数据的状态由您决定。这是Redux进入的地方。

3.什么是Redux

1. redux是一个独立专门用于做状态管理的JS库(不是react插件库)
2. 它可以用在react、angular、vue等项目中，但基本与react配合使用
3. 作用：集中式管理react应用中多个组件共享的状态

 

4.什么情况下需要使用redux

1. 总体原则: 大型项目状态管理复杂才用
2. 某个组件的状态，需要共享
3. 某个状态需要在任何地方都可以拿到
4. 一个组件需要改变全局状态
5. 一个组件需要改变另一个组件的状态

 二、 最新React-Redux 的流程

1. 安装Redux Toolkit

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

2.创建一个 React Redux 应用

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

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Redux 核心库​

Redux