【React学习打卡第三天】-EW帮帮网

Redux快速上手、三个核心概念、React组件使用、修改store的数据、提交action传参、异步操作、Redux调试

一、Redux快速上手
- 1.概念
- 2.快速体验(纯redux计数案例）
- 3.三个核心概念
二、Redux与React-环境准备
三、Reduc与React-实现counter
四、提交action传参实现需求
五、异步状态操作
六、Redux调试 - devtools
七、美团外卖案例

一、Redux快速上手

1.概念

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行

作用：通过集中管理的方式管理应用的状态
案例：使用纯Redux实现计数器
在这里插入图片描述

2.快速体验(纯redux计数案例）

<button id="decrement">-<button/>
<span id="count">0<span/>
<button id="increment">+<button/>

//1. 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态）
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. 使用createStore方法传入 reducer函数 生成一个store实例对象
	const store=Redux.createStore(reducer)
//3. 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）
//回调函数可以在每次state发生变化时自动执行
	store.subscribe(()=>{
		console.log("State变化了“,state.getState())
		document.getElementById('count').innerText=store.getState().count
	})
//4. 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）
const inBtn = document.getElementById('increment')
inBtn.addEventListener('click',()=>{
	//增
	store.dispatch({
		type:"INCREMENT"
	})
})
const inBtn = document.getElementById('dncrement')
inBtn.addEventListener('click',()=>{
	//减
	store.dispatch({
		type:"DECREMENT"
	})
})
//5. 使用store实例的 getState方法 获取最新的状态数据更新到视图中

3.三个核心概念

为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer
state-一个对象存放着我们管理的数据状态
action - 一个对象用来描述你想怎么改数据
reducer - 一个函数根据action的描述生成一个新的state
在这里插入图片描述

二、Redux与React-环境准备

1.配套工具

Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
react-redux - 用来链接 Redux 和 React组件的中间件

2.配置基础环境

（1）. 使用 CRA 快速创建 React 项目
npx create-react-app react-redux
（2）. 安装配套工具
npm i @reduxjs/toolkit react-redux
（3）. 启动项目
npm run start

3.store目录结构设计

通常集中状态管理的部分都会单独创建一个单独的 store 目录
应用通常会有很多个子store模块，所以创建一个 modules 目录，在内部编写业务分类的子store
store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

三、Reduc与React-实现counter

在这里插入图片描述

1.使用React Toolkit 创建 counterStore

子模块的创建：

// store/modules/counterStore.js
import {createSlice} from "@reduxjs/toolkit"
const counterStore=createSlice({
	name:"counter",
	//初始化state
	initialState:{
		count:0
	},
	//修改状态的方法，同步方法，支持直接修改
	reducer:{
		increment(state){
			state.count++
		},
		decrement(state){
			state.count--
		}
	}
})
//解构出来actionCreater函数
const {increment,decrement}=counterStore.actions
//获取reducer
const reducer =counterStore.reducer
//以按需导出的方式导出actionCreater
export {increment,decrement}
//z以默认导出的方式导出reducer
export default reducer

子模块的整合：

// store/index.js
import {configureStore} from "@reduxjs/toolkit"
//导入子模块reducer
import counterReducer from "./modules/counterStore"
const store = configureStore({
	reducer:{
		counter:counterReducer
	}
})
export default store

2.为React注入store

react-redux负责把Redux和React 链接起来，内置 Provider组件通过 store 参数把创建好的store实例注入到应用中，链接正式建立

index.js:
在这里插入图片描述

3.React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个钩子函数 - useSelector，它的作用是把store中的数据映射到组件

在app.js组件中使用数据：

//App.js
import {useSelector}from 'react-redux'
function App(){
	const {count}=useSelector(state=>state.counter)
	return (
		<div className="App">
			{count}
		<div/>
	)
}

3.React组件修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的dispatch函数

//App.js
import {useDispatch,useSelector}from 'react-redux'
//导入actionCreater
import {increment,decrement}from './store/moduls/counterStore'
function App(){
	const {count}=useSelector(state=>state.counter)
	const dispatch=useDispatch()
	return (
		<div className="App">
			<button onClick={()=>dispatch(decrement())}>-</button>
			{count}
			<button onClick={()=>dispatch(decrement())}>+</button>
		<div/>
	)
}