当前位置：首页 > wzjs >正文

东莞市建设信息网官网新人学会seo

wzjs 2025/8/10 4:52:27

东莞市建设信息网官网,新人学会seo,龙岩品牌设计,石家庄又出疫情了redux系列文章目录一什么redux？ redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angular, vue等项目中, 但基本与react配合使用。集中式管理react应用中多个组件共享的状简单来说，就是存储页面的状态值的一个库&#xf…

redux系列文章目录

一什么redux？

redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angular, vue等项目中, 但基本与react配合使用。集中式管理react应用中多个组件共享的状

简单来说，就是存储页面的状态值的一个库，需要的时候取出来就行

二 redux的工作原理

在这里插入图片描述

Action‌

Action是一个描述发生了什么的普通JavaScript对象。当用户在界面上执行某个操作时（如点击按钮），会派发一个action。Action必须有一个type属性来标识其类型。

Reducer‌

Reducer是一个纯函数，接收先前的状态和一个action，返回新的状态。Redux要求所有的状态更新逻辑都写在reducer中，确保状态的更新是可预测和确定的。

Store‌

Store是将所有状态保存为一个对象树（state tree）的地方。它提供几个方法，如dispatch(action)来触发action，getState()来获取当前状态，subscribe(listener)来注册监听器等。

三使用redux

准备工作

1.一个react项目环境下，下载依赖

npm i redux

2.新增src/redux文件夹；
新增 src/redux/store.js文件和src/redux/reducers.js文件；
新增src/pages/counter/index.js文件

代码

src/redux/reducers.js文件

function counterReducer(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;default:return state;}
}   export default counterReducer;

src/redux/store.js文件

import {createStore} from 'redux';
import counterReducer from './reducer'
let store = createStore(counterReducer);export default store

src/pages/counter.js文件

import React, { useState } from 'react'
import store from '../../redux/store'
export default function Count() {const [count, setCount] = useState(0)store.subscribe(() => {console.log("监听其变化----", store.getState())setCount(store.getState())})return (<div>当前count:{count}<br /><button onClick={() => {store.dispatch({ type: 'INCREMENT' })}}>新增count</button>&nbsp;<button onClick={() => {store.dispatch({ type: 'DECREMENT' })}}>减少count</button></div>)
}