Redux 笔记整理

阿狸演绎

已于 2023-06-13 13:00:05 修改

阅读量383

点赞数

分类专栏： React 文章标签：笔记 javascript 开发语言

于 2023-06-08 20:00:00 首次发布

本文链接：https://blog.csdn.net/qq_31334119/article/details/131046198

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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();