react redux的学习,单个reducer

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>
            &nbsp;
            <button onClick={() => {
                store.dispatch({ type: 'DECREMENT' })
            }}>减少count</button>
        </div>
    )
}

效果

redux 的使用效果

相关推荐
恋猫de小郭7 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆10 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼20 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子22 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆23 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了23 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆28 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆29 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js