Redux
核心概念:store
、action
、reducer
store
(斯道尔):仓库,存储了数据,管理者(一个项目只有一个仓库),管理 action 和 reduceraction
:“专家”,只提想法不干活(动作)reducer
(瑞丢色儿):劳动者,搬砖的人
redux-action - 一个对象或者行为的抽象(要做的事情)【eg:点按钮+1 的事】
-
包括2个属性:
-
type:标识属性,值为字符串,唯一,标识将来要执行的动作【必须】
-
data:数据属性,值类型任意,可选属性
【id 为 ADD的action 要 +1 】
const addNum = {type:"ADD" ,1 }
-
-
两种类型:
- Object:同步action
- function:异步action
readux-action create 用一个函数去动态创建action,dispatch是派发任务
const addNum = (count)=>{return{type:"ADD",count}
}
const addNum = (count)=>({ type:"ADD",count })
// 这个就可以加2了
dispatch(addNum(2))
redux-reducer- (做事情)必须是一个纯函数,用来处理action的逻辑
【纯函数: 返回新数据, 保证不改变原数据 】
state 需要有默认值,就是redux的初始值,内部需要判断action的type判断,但是处理的时候不能修改原数据,如果需要未声明的type.要返回原来的state
function reducer1(state = 0, action ){if(action.type === "ADD") {return state+1} else {return state}
}
const reducer1 = (state = 0, action) => {switch (action.type) {case 'ADD':// 返回新的statereturn state + 1}default:return state
}
redux-state - 数据存储(本质上是一个状态树,保存了所有对象的状态)
getState():得到state;
dispatch(action):分发action,触发reducer调用,产生新的state;
subscribe(listener):注册监听(订阅),当状态发生变化,就会执行(执行的方法自己写)。
// 创建store
const { createStore } = window.Redux
// createStore(reducer函数,可选=>state初始值)
let store = createStore(reducer1)
// 打印初始状态
console.log(store.getState()) // {count: 1}
// 每次 state 更新时,打印日志
// subscribe() 订阅 返回一个函数用来注销监听器
const unsubscribe = store.subscribe(() => console.log(store.getState()))
// 发起一系列 action
store.dispatch(addNum(2))
store.dispatch(addNum(4))
// 停止监听 state 更新
unsubscribe();