Redux 笔记整理

Redux

核心概念：store、action、reducer

• store(斯道尔)：仓库，存储了数据，管理者(一个项目只有一个仓库)，管理 action 和 reducer
• action：“专家”，只提想法不干活(动作)
• 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':
      // 返回新的state
      return 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();