React入门之Redux（一）：手动模拟Redux的基本流程

Redux是React中一个重要的部分，它的提出主要是为了解决数据的存取问题

我们知道React中，子组件需要通过props属性与父组件交互，如果两个组件分别处于不同的父组件A、B下，但又需要数据共享时，需要共享的父组件可以多存储一个字段，或者通过层层props传递，把数据传到需要的子组件中，就像这样：

使用解决方法一：

使用解决方法二：

引出

---

看起来好像稍显麻烦了一些，于是引入了Redux，使用Redux统一管理数据

相关知识与术语解释：

| 核心变量 | 备注 |

| — | — |

| state | 数据 |

| store | Redux的数据管理仓库 |

| action | 组件提起数据更新请求，交由action发送给reducer |

| reducer | Redux的减速器，通过reducer判断组件的请求并实际操控store修改数据 |

模拟Redux流程

---

引入Redux的cdn

在index.html引入Redux的cdn

另：在index.js文件中写模拟redux的流程代码，所以还需引入index.js文件

创建store

从redux库中解构出创建store的方法——createStore，该方法需传入一个减速器，将store与myReducer绑定，可以允许这个减速器操作数据

const {createStore} = Redux;

const store = createStore(myReducer)

定义减速器reducer

reducer有两个参数，一个是数据state，一个是请求action

function myReducer( state=initState, action){

// 先简单打印一下

console.log(state, action);

}

初始化state

一开始的state为空，我们需要初始化一下

// 3.初始化state

const initState = {

todos:[],

posts:[]

}

定义action

定义请求的类型与内容

// 4.action 是一个js对象

const postAction = {

type:“ADD_POST”,

post:“我的第一篇博客”

}

提交更新

// 5.派发action

store.dispatch(postAction);

此处我们可以打开控制台看一下myReducer的输出效果：

解析action

由于reducer返回的是新的数据，不会将更新的return与原数据合并，因此解析了action操作后，如果return的只有本次更新的字段，其余字段的数据就会消失，只保存return的数据，比如：

function myReducer( state=initState, action){

// console.log(state, action);

// 解析action，更新state

if (action.type == ‘ADD_POST’){

return {

posts:[…state, action.post]

}

}

}

这样操作后，todos字段就会被覆盖，只剩下posts字段

因此，我们需要拷贝一份原数据，在此基础上更新post字段，就像这样：

function myReducer( state=initState, action){

// console.log(state, action);

// 解析action，更新state

if (action.type == ‘ADD_POST’){

return {

…state,

posts:[…state, action.post]

}

}

}

订阅更新

为了及时响应state的每次修改，需要订阅store

当state发生改变时，相关的组件就能接收到消息，将更新的state通过props传递给组件

// 6.订阅store，由于此处没有设置子组件，因此只是简单地输出一下

store.subscribe(()=>{

console.log(“state已更新”);

console.log(store.getState());

})

效果：

多次dispatch

store.dispatch({type:“ADD_TODO”,todo:“打扫卫生”});

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
链图片转存中…(img-CWe8BYTC-1715585997893)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！