最近在和朋友探讨的时候,“别整天问我底层了“,也被问到了一些关于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在组件页面创建,相当于一个变量