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项目环境下,下载依赖
bash
npm i redux
2.新增src/redux文件夹;
新增 src/redux/store.js文件和src/redux/reducers.js文件;
新增src/pages/counter/index.js文件
代码
src/redux/reducers.js文件
bash
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文件
bash
import {createStore} from 'redux';
import counterReducer from './reducer'
let store = createStore(counterReducer);
export default store
src/pages/counter.js文件
bash
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>
<button onClick={() => {
store.dispatch({ type: 'DECREMENT' })
}}>减少count</button>
</div>
)
}
效果
redux 的使用效果