Redux解决了什么问题

pinecone 发布于2019-08-23 17:15 / 806人阅读

摘要：它搭配解决了组件之间通信问题，这个通信问题，是组件和其它组件之间也可以跨层通信，不需要一层一层的把，父组件的数据往下传递。库解决了什么问题解决了跨层组件通信问题。

忽略此文，不敢浪费你的时间 Redux是什么？

Redux是Facebook提出一个数据状态管理的库，也可以说框架。它搭配React解决了组件之间通信问题，这个通信问题，是组件和其它组件之间也可以跨层通信，不需要一层一层的把，父组件的数据往下传递。这会增加代码复杂度和维护的复杂度。

如果使用React.createContext的API也可以实现跨层通信，你可以多带带写一个模块去封装Context.Provider和Context.Consumer，只有在根组件使用Context.Provider后，需要共享Context上的数据的组件，都可以通过引入Context.Consumer组件去获取公共的数据。哪个组件需要顶层组件的数据，就必须引入Context.Consumer。

  //context.js
  export default Context  = createContext("")

 //app.js
 let store = createStore(reducer)

 import Context from "./context.js"
 
    {(data) => ({data.time})}

store

整个Application的数据保存地。这里有一切应用所共享的数据，后台交互和用户输入的数据都在这里管理。Redux提供了一个方法，创造整个应用数据的store,只需要使用es6模块机制，import命名可以输出我们需要的接口。

import { createStore } from "redux"
//创建store必须，外部注入数据和改变整个state的逻辑
let store = createStore(reducer,initalPreLoadState)

action

描述界面的交互和行为的对象，用户要做什么事，必须发送一个action对象到store的dispatch函数里面，根据提供reducer去匹配action.type，如果没有type匹配对了，会执行接下里的逻辑，更新整个store里面该改变的数据。

store.dispatch的源代码里，对传入的action是否为对象做了判断，是否有type属性也做了判断。如果action没有问题，那么执行定义传入的reducer(state,action)函数，

reducer

reducer是一个纯函数，什么样的输入就得出什么样的输出，怎么理解呢? store.dispatch发送了action，当然，这个store.dispatch早就放在了标签的事件里，等着用户去触发。action对象来到store.dispatch函数内存，有了action的数据，执行reducer函数，去匹配类型，执行对应的代码。

    function add(state=0,action) {
        switch(action.type){
            case "add":
                return state + 1
            case "decre":
                return state - 1
            default:
                return state
        }
    }

改变state的唯一方式

state和view一一对应，state改变了，view也就改变了。state如何改变，界面的标签上，给定的事件，store.dispatch函数，该函数的参数是action对象，描述要做什么事，触发此函数，传递给整个应用的store，会执行store.dispatch函数里的reducer函数，去更新state，store.subscribe函数监听store的数据发生变化，便会触发此函数去更新React的根组件。

Redux没有解决什么？

redux库提供了核心一个API,createStore函数，可以把整个应用的数据也就是存放在store里面，但是它真的只提供了数据，对于组件之间的通信，redux库是没有解决的。store里面的数据还是得从顶层组件往下传，一层一层传。

如果要跨组件通信，顶层组件与任意组件通信，redux必须借助react的Context的API，结合Redux和React结合成一个库，这样提供的两个API，就可以跨层通信。

React-Redux库解决了什么问题

解决了跨层组件通信问题。

GPU云服务器云服务器云服务器ecs解决了哪些问题 sdwan解决什么问题苹果手机连接阿里云服务器是什么问题了阿里云的服务器登录密码是什么问题了

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

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

【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
Redux概念之一: Redux简介

摘要：应用这说明并不是单指设计给用的，它是独立的一个函数库，可通用于各种应用。在数据流的最后，要触发最上层组件的，然后进行整体的重新渲染工作。单纯在的对象上是没有办法使用，要靠额外的函数库才能这样作，这是一定要使用类似像这种函数库的主要原因。 Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器这句话虽然简短，其实是有几个涵义的: ...

cjie 2019-08-20 13:59 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
高级前端面试题大汇总（只有试题，没有答案）

摘要：面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。有些面试题会重复。使用过的koa2中间件 koa-body原理介绍自己写过的中间件有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理如何和MySQL进行通信 React声明周期及自己的理解如何...

kviccn 2019-08-23 13:41 评论0 收藏0