redux状态管理核心流程

最新推荐文章于 2024-03-07 15:39:30 发布

天宇流沙

最新推荐文章于 2024-03-07 15:39:30 发布

阅读量188

点赞数

文章标签：前端 react.js redux

本文链接：https://blog.csdn.net/qq_41792374/article/details/132569810

版权

1引入create 从redux库，
2.创建reducer 对象，并实例化；
3.发送一个dispach,
4.reducer写数据处理逻辑。

import { createStore } from "redux"
const initialState = []//状态集
//1-创建reducer对象，第一个参数是状态，第二个参数是dispach的第一个参数action
const reducer = function(state = initialState, action){switch(action.type){
case "addBook":
return [...initialState,action.row]
case "delBook":
return []
default:
return [...state]

break
}}
const store=createStore(reducer) //2.实例化一个store
const action={
type:'addBook',
row:{id:'1',name:'asdf'}
}
store.dispach(action)//3.发送一个dispach
//附带讲一下redux的订阅函数substribe,state变化的时候会触发，可以用store.getstate方法查看状态集，
store.substribe(()=>{
console.log(store.getstate())
})