React学习笔记08

一、什么是Redux

Redux是React中最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行,作用是通过集中管理的方式管理应用的状态

二、Redux快速体验

手搓一个Redux:

1、定义一个reducer函数(根据当前想要做的修改返回一个新的状态)

2、使用createStore方法传入reducer函数生成一个store实例对象

3、使用store实例的subscribe方法订阅数据的变化(数据一旦发生变化,可以得到通知)

4、使用store实例dispatch方法提交action对象触发数据变化(告诉reduce你想怎么改数据)

5、使用store实例的getState方法获取最新的状态数据更新到视图中

javascript 复制代码
// 1.定义reducer函数
// 作用:根据不同的action对象,返回不同的新的state
// state:管理的数据初始状态
// action:对象type标记当前想要做什么样的修改
const Redux = useReducer()
function reducer(state = { count: 0 }, action) {
  // 数据不可变:基于原始状态生成一个新的状态
  if (action.type === 'INCREMENT') {
    return { count: state.count + 1 }
  }
  if (action.type === 'DECREMENT') {
    return { count: state.count - 1 }
  }
  return state
}
// 2.使用reducer函数生成store实例
const store = Redux.createStore(reducer)

// 3.通过store实例的subscribe订阅数据变化
store.subscribe(() => {
  console.log('state变化了', store.getState());
  // 5.通过store实例的getState方法
  document.getElementById('count').innerText = store.getState().count
})

// 4.通过store实例的dispatch函数提交action更改状态
const inBtn = document.getElementById('increment')
// 增
inBtn.addEventListener('click', () => {
  store.dispatch({
    type: 'INCREMENT'
  })
})

const dBtn = document.getElementById('decrement')
// 减
dBtn.addEventListener('click', () => {
  store.dispatch({
    type: 'DECREMENT'
  })
})

三、Redux管理数据流程梳理

为了职责清晰,数据流向明确,Redux把整个数据修改的流程分成了三个核心概念,分别是state、action和reducer

1.state:一个对象,用来存放我们管理的数据状态

2.action:一个对象,用来描述你想怎么改数据

3.reducer:一个函数,用来根据action的描述生成一个新的state

至此Redux快速上手介绍完了,敬请关注下一章Redux与React

相关推荐
_李小白7 分钟前
【OPENGL ES 3.0 学习笔记】第一天:认识渲染管道
笔记·学习
future14129 分钟前
单片机学习日记
单片机·嵌入式硬件·学习
半路程序员22 分钟前
Go语言学习(三)
学习
渡我白衣26 分钟前
深度学习入门(一)——从神经元到损失函数,一步步理解前向传播(上)
人工智能·深度学习·学习
bnsarocket39 分钟前
Verilog和FPGA的自学笔记4——多路选择器(always语句)
笔记·fpga开发·编程·verilog·自学·硬件编程
敲代码的嘎仔1 小时前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
Keepreal4962 小时前
pdf文件预览实现
javascript·react.js
Amy_au2 小时前
AWS Lambda 学习笔
学习·云计算·aws
Python私教2 小时前
React + Ant Design + Tailwind CSS 打造「无痕」垂直滚动区域:功能全上,滚动条隐身
前端·css·react.js
chennn122 小时前
c++相关学习
开发语言·c++·学习