深入理解redux

pekonchan 发布于2019-08-23 14:21 / 3253人阅读

摘要：深入简述在快速理解中，我简单的介绍了的基础内容，本篇文章中，我们将再度深入。二修改我曾在快速理解中提起，为了解决模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果的矛盾，团队创建了。

深入Redux 简述

在快速理解redux中，我简单的介绍了redux的基础内容，本篇文章中，我们将再度深入redux。

redux解决的问题

数据和函数的层层传递

多个组件同时修改某全局变量

一、react数据流

众所周知，react的单向数据流是这样的，父组件可以向子组件传递数据

我们通常用过状态提升将数据存于高阶函数中，使我们的子组件尽可能的更"纯"，更好的实现代码复用。

可能在页面结构简单的小型项目中我们还没觉得有什么不妥，但是倘若在页面结构稍复杂的项目中，就会变成这样

D组件中的数据存于Container中，要通过Container -> Content -> B -> D才能到达D组件。
当然，这对我们聪明有能干的开发者们并不算什么，耗些时间也能刚出来。

Then，这种页面，你还能搞得定吗？

就算你能搞定，你的代码中也有大量的冗余，从Container到N之间的所有组件都要传递N需要的props

所以，为了解决层层传递,react-redux就出现了
它利用了react中的context，在Container的context里创建store，使Container的所有子组件，孙组件等等都可以直接获取store中的内容。

二、修改store

我曾在快速理解redux中提起，为了解决模块（组件）之间需要共享数据和数据可能被任意修改导致不可预料的结果的矛盾，redux团队创建了dispatch。So 不可预料的结果究竟是什么？

我们思考一个问题，假如所有的组件都以 store.xxx = xxx; // 伪代码 这种方式修改全局变量，会引发什么问题？

我们再思考，为何python等语言会存在线程锁，数据库也存在锁，操作系统的生产者/消费者问题等等
假如A和B同时修改store，store是遵从A还是遵从B？

为了避免以上情况引发死锁redux想出了一个办法：封装一个dispatch函数，接收一个action对象作为参数，每当组件想要修改store时必须给dispatch传递action，然后再store内部根据action对象的type将dispatch分发到相应的队列中，每一时刻仅执行一个dispatch

三、redux异步问题

思考这样一个情景，我们从后端的接口获取了数据，我们想将其存入store中。但是当执行到reducer时，数据是否已经获取到？假如没有，又该怎么办？
就在此时，中间件出现了，例如 redux-saga, redux-thunk 等等。

redux-saga 使用了generate生成器，使开发者可以按同步思路的书写异步代码，再根据action的type选择相应reducer更新store

function *fetchNodeDetailByNodeId({ payload: { nodeId } }, { call, put }) {
  try {
    const { data, status }= yield call(fetchNodeDetailByNodeId, nodeId)
    if (data && status.errmsg === "success") {
      yield put({
        type: "setStates",
        payload: {
          nodeDetailData: data,
        },
      });
    } else {
      message.info("开了个小差,再试一次吧..");
    }
  } catch (error) {
    console.log(error);
  }
},

GPU云服务器云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100471.html

深入浅出redux学习（-）

摘要：只要输入的值不变，每次输出都是一样的值。指定位置元素运算操作如可用以下方式代替主要是生成中最核心的对象。描述发生了什么，是响应并对进行更新。生成的对象包含个方法，分别为，和。按照约定，具有字段来表示它的类型。前言：一开始接触redux的时候最令我记住的一句话是：You Might Not Need Redux（那我还写这篇文章干嘛？手动滑稽）回归正题，本文主要是围绕redux...

xietao3 2019-08-23 12:33 评论0 收藏0
redux 资料合集

摘要：资料合集学习有段时间了，相关不错的资料整理下，希望能帮到有缘人五颗星推荐中文文档通读不下边，翻译的很好，想理解清楚，定下心来，认真读，必有收获官方推荐资料合集，没有啥说的中间件深入浅出就因为看了这篇文章才更加深入学习，同时对有了别样的看法 redux 资料合集学习redux有段时间了，相关不错的资料整理下，希望能帮到有缘人五颗星推荐中文文档通读不下3边，翻译的很好，想理解清楚...

Alan 2019-08-19 17:14 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

imingyu 2019-08-20 14:22 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

VPointer 2019-08-01 16:19 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0