关于Redux的一些原理

最近在和朋友探讨的时候,“别整天问我底层了“,也被问到了一些关于redux的问题,于是乎总结了一下之前东西,先从概念开始

一.概念

        redux是一个JavaScript状态容器,主要提供状态管理。可以运行于服务端,客户端,原生应用。除了支持React外还支持其他的UI框架,体积小,只有2kb。

        用白话来说,它就是一个仓库,你需要取东西的时候去拿,需要放东西的时候去存就行了,用过vue的同学应该知道这个和Vuex很像。

二.运行机制(原理)

     刚才第一点上面已经说了,它就是一个仓库,那么仓库一般应该有什么配置,没错,管理员一个即可,需要什么你就告诉管理员,让他去给你执行。

    然后把这一套流程运用到redux操作中,当你在组件里面执行事件,需要先触发action,然后推送action到store,到了store之后,仓库的管理者,也就是reducer拿到action,进行操作,操作完成之后,返回新的store给组件,这个时候组件里面需要添加订阅,也就是监听store的方法 subscribe(),然后这个方法更新页面上的数据,如下

    store.subscribe(this.upState)     

    upState=()=>{

    this.setState(store.getState())

   }

    //store.getState()表示获取仓库的数据

三.安装使用

1.yarn add redux 或者 cnpm install --save redux

2.使用Provider标签把它挂载上去,对于这个标签作用类似于vue中在main.js中挂载vuex,如下

3.新建如下目录及js

index.js   //仓库,也就是官方的store

Recduer.js   //仓库管理者

action在组件页面创建,相当于一个变量


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在vue中,我们使用Vuex来管里我们项目中的数据,而在React中,我们同样有相应地数据管理工具Redux。Vu...
    雪燃归来阅读 2,035评论 0 2
  • REDUX 1.redux究竟是个什么玩意 ? ​ 如果要谈起redux,我们必须要了解什么叫做 函数式编程 ...
    公羊无衣阅读 1,512评论 9 18
  • 前言 学习redux首先要知道redux是什么。官网介绍的redux是js状态容器。黑人问号脸??? 在我的理解中...
    DomChange阅读 1,474评论 0 2
  • React-Transition-Group React动画组件库 实现css3过渡动画效果 用法其实我没怎么看 ...
    zz77zz阅读 787评论 2 1
  • 一. 纯原生 redux 的使用 Redux 是常用的状态管理容器,能够帮助我们对一些全局变量进行有效管理。首先,...
    林木木road阅读 2,092评论 0 2

友情链接更多精彩内容