Redux基本介绍【状态管理器】

最新推荐文章于 2024-09-12 21:55:06 发布

Cao_Mary

最新推荐文章于 2024-09-12 21:55:06 发布

阅读量494

点赞数

分类专栏： Redux React

本文链接：https://blog.csdn.net/Cao_Mary/article/details/116157066

版权

React 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

Redux

7 篇文章 0 订阅

订阅专栏

本文每节之间有一定关联关系，建议小白阅读全文。大神们找对应章节内容即可。

Redux基本介绍【React状态管理器】

1 基本概念

1.1 什么是Redux？

Redux是一个管理状态（数据）的容器，提供了可预测的状态管理

1.2.什么是可预测的状态管理？

数据在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理

1.3.为什么要使用Redux？

React是通过数据驱动界面更新的，React负责更新界面，而我们负责管理数据
默认情况下我们可以在每个组件中管理自己的状态【通过props，state】，但是现在前端应用程序已经变得越来越复杂
状态之间可能存在依赖关系（父子、共享等），一个状态的变化会引起另一个状态的变化
所以当应用程序复杂的时候，状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪
所以当应用程序复杂的时候，我们想很好的管理、维护、追踪、控制状态时，我们就需要使用Redux

1.4.Redux核心理念

通过store来保存数据【存数据的对象】
通过action来修改数据
通过reducer将store和action串联起来

// 工作流程
                    -------------
        --------->  | Component |  ---------
       |            -------------           |
       |                                    ↓
-------------       -------------       -------------
|   Store   | <---- |  Reducer  | <---- |  Action   |
-------------       -------------       -------------

// store
const initialState = {
   heroes:[
     {name:'鲁班'， age:18},
     {name:'虞姬'， age:22},
   ]
}
// action type：做什么操作  playload：操作的内容
const action = {type:'CHANGE_NAME', playload:{index:0, newName:'黄忠'}}
const action = {type:'CHANGE_AGE', playload:{index:1, newAge:66}}

function reducer(state = initialState, action){
    switch(action.type){
        case: 'CHANGE_NAME':
            // 修改姓名
            return newState;
        case: 'CHANGE_AGE':
             // 修改年龄
            return newState;
    }
}

官方文档： https://www.redux.org.cn/docs/introduction/CoreConcepts.html

2 三大原则

单一数据源
- 整个应用程序的state只存储在一个 store 中【为了方便管理、维护、追踪数据】
- Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
State是只读的
- 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
- 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改stat；
- 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；
使用纯函数来执行修改
- 通过reducer将旧state和 action联系在一起，并且返回一个新的State：
- 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
- 但是所有的reducer都应该是纯函数，不能产生任何的副作用

什么是纯函数？

返回结果只依赖于它的参数，并且在执行过程里面没有副作用
// 纯函数
function sum(num1, num2){
return num1 + num2; // 返回结果只依赖传递进来的参数，没有副作用
}
// 非纯函数
let num1 = 10;
function sum(num2){
return num1 + num2; // 返回结果还依赖外界变量，有副作用，num1可能会啊改变
}
// 纯函数
const num1 = 10;
function sum(num2){
return num1 + num2; // 没有副作用
}

官方文档： https://www.redux.org.cn/docs/introduction/ThreePrinciples.html

3 基本使用

3.1 单独使用Redux

Redux实际是一个独立的库，只要是js就能使用

初始化一个node项目：npm init --y
安装Redux：npm install --save redux
新建index.js文件，编写代码
- 导入Redux：
```
const redux = require('redux')
```
- 利用store来保存状态（state）
- 利用action来修改状态
- 利用reducer将store和action串联起来
完整代码

const redux = require('redux')
const ADD_COUNT = 'ADD_COUNT' // 使用常量写操作类型，保证写错操作类型会报错
const SUB_COUNT = 'SUB_COUNT'
// 定义一个状态
let initialState = {
    count:0
}
// 利用store来保存状态（state）
const store = redux.createStore(reducer)

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1}
// const subAction = {type:SUB_COUNT, num: 1}
const addAction = (num) => { // 函数的写法，使action更加灵活
    return {type:ADD_COUNT, num: num}
}
const subAction = (num) => {
    return {type:SUB_COUNT, num: num}
}
// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num}
        case SUB_COUNT:
            return {count: state.count - action.num}
        default:
            return state
    }
}
// 在组件中如何监听状态的改变？
store.subscribe((a)=>{
    console.log(1,store.getState());
}); // 5 4 

// 在组件中如何从Store中获取存储的状态？
console.log(2,store.getState()); // 0

// 在组件中如何修改Store中存储的状态？
store.dispatch(addAction(5));
store.dispatch(subAction(1));

console.log(3,store.getState()); // 4