初识redux

首先,附上学习文档,有兴趣的朋友可以认真看着文档学习,此篇内容只做redux精简介绍。
 
一。学习文档
 
1.英文文档: https://redux.js.org/
 
2.中文文档: http://www.redux.org.cn/
 
二。redux是什么
 
1.redux是一个专门用于做状态管理的JS库(不是react插件库)。
 
2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。
 
3.作用: 集中式管理react应用中多个组件共享的状态。
 
三。什么情况下需要使用redux
 
1.某个组件的状态,需要让其他组件可以随时拿到,可以产生共享情况。
 
2.一个组件需要改变另一个组件的状态,不仅局限于父子关系,而是一个项目中所有的组件都可以调用这个状态或方法。
 
3.使用redux原则:能不用就不用, 如果不用比较吃力才考虑使用。通常用于大型项目,组件之间通信较为复杂的情况。小型项目不需要使用可以尽量不用。
 
四。redux工作流程
 
三个核心概念:
 
1.action(动作的对象)
 
包含2个属性
 
type:标识属性, 值为字符串, 唯一, 必要属性
 
data:数据属性, 值类型任意, 可选属性
 
例子:{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }
 
2.reducer(用于初始化状态、加工状态)
 
加工时,根据旧的state和action, 产生新的state的纯函数。
 
3. store(将state、action、reducer联系在一起的对象)
 
使用方法
 
import {createStore} from ‘redux’
 
import reducer from ‘./reducers’
 
const store = createStore(reducer)
 
该对象的功能
 
1)getState(): 得到state
 
2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
 
3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
 
五。redux的核心API
 
1.createstore()
 
创建包含指定reducer的store对象
 
2.store对象
 
作用: redux库最核心的管理对象
 
它内部维护着:state和reducer
 
核心方法:
 
1)getState()
 
2)dispatch(action)
 
3)subscribe(listener)
 
具体编码:
 
1)store.getState()
 
2)store.dispatch({type:‘INCREMENT’, number})
 
3)store.subscribe(render)
 
3.applyMiddleware()
 
应用上基于redux的中间件(插件库)
 
4.combineReducers()
 
合并多个reducer函数

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64180.shtml

张贴在3