Redux学习过程

最新推荐文章于 2024-03-06 15:45:44 发布
最新推荐文章于 2024-03-06 15:45:44 发布
阅读量162 收藏
点赞数
分类专栏： React技术栈相关 文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BWater_monster/article/details/113878500
版权

简单的加减需求

——视频学习,来源于尚硅谷https://www.bilibili.com/video/BV1wy4y1D7JT?p=100&spm_id_from=pageDriver

在这里插入图片描述

1、纯react

import React, { Component } from 'react'

export default class index extends Component {

    state = {count:0}

    //加法
    increment = ()=>{
        const {count} = this.state;
        const {value} = this.selectValue;
        this.setState({
            count:count+value*1
        })
    }

    //减法
    decrement = ()=>{
        const {count} = this.state;
        const {value} = this.selectValue;
        this.setState({
            count:count-value*1
        })
    }

    //当前值为奇数是加
    incrementIfOdd = ()=>{
        const {count} = this.state;
        const {value} = this.selectValue;
        if(count %2 !== 0){
            this.setState({
                count:count+value*1
            })
        }
    }

    //延时加
    incrementAsyns = ()=>{
        const {count} = this.state;
        const {value} = this.selectValue;
        setTimeout(() => {
            this.setState({
                count:count+value*1
            })
        },500)
        
    }

    render() {
        return (
            <div>
                <h1>当前值为{this.state.count}</h1>
                <select ref={cN => this.selectValue = cN}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick = {this.increment}>increment</button>
                <button onClick = {this.decrement}>decrement</button>
                <button onClick = {this.incrementIfOdd}>奇数加</button>
                <button onClick = {this.incrementAsyns}>延时加</button>
            </div>
        )
    }
}

2、简洁的redux(不包含action,action其实就是一个object的一般对象,可以手动写,下边第三个在写成文件形式)

//入口文件

import ReactDom from 'react-dom'
import App from './App'
import store from "./redux/store"
ReactDom.render(<App />,document.getElementById("root"))

// 监听store变化
store.subscribe(()=>{
    ReactDom.render(<App />,document.getElementById("root"))
})

//组件Count文件

import React, { Component } from 'react'
//引入store
import store from "../../redux/store";

export default class index extends Component {


    componentDidMount() {
        // 监听store状态变化,通过setState让render重新渲染实现新状态展示,为防治多个(成百上千)组件都要监听,在入口文件(index.js)监听即可
        // store.subscribe(()=>{
        //     this.setState({})
        // }) 
    }

    //increment
    increment = ()=>{
        //获取option的value
        const {value} = this.selectValue;
        //通知redux加value
        store.dispatch({
            type: "increment",
            data: value * 1,
        })
    }

    //decrement
    decrement = ()=>{
        //获取option的value
        const {value} = this.selectValue;
        //通知redux加value
        store.dispatch({
            type: "decrement",
            data: value * 1,
        })
    }

    //incrementIfOdd
    incrementIfOdd = ()=>{
        const {value} = this.selectValue;
        if(store.getState() %2 !== 0){
            store.dispatch({
                type: "increment",
                data: value * 1,
            })
        }
    }

    //incrementAsyns
    incrementAsyns = ()=>{
        const {value} = this.selectValue;
        setTimeout(() => {
            store.dispatch({
                type: "increment",
                data: value * 1,
            })
        },500)
    }

    render() {
        return (
            <div>
                <h1>当前值为{store.getState()}</h1>
                <select ref={cN => this.selectValue = cN}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick = {this.increment}>increment</button>
                <button onClick = {this.decrement}>decrement</button>
                <button onClick = {this.incrementIfOdd}>奇数加</button>
                <button onClick = {this.incrementAsyns}>延时加</button>
            </div>
        )
    }
}

//store文件

/*
    store
    该文件只有一个,用于暴露一个store对象
*/

//引入createStore,专门用于创建store对象
import {createStore} from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reducer"

export default createStore(countReducer)

//count组件的reducer文件

/*
    这是组件Count的reducer
    该文件是用于创建一个专门为Count组件服务的reducer,reducer的本质是一个函数
    reducer函数会接收两个参数,分别是 之前的状态preState,动作对象action
*/

//初始化的状态值
const initState = 0;
export default function countReducer (preState = initState,action) {
    // console.log(preState,action);
    //获取action对象的type及data
    const {type, data} = action;
    //判断类型,进行不同的操作(加减)
     switch (type) {
        case 'increment':
            return preState + data;
        case 'decrement':
            return preState - data;
        default:
            return preState;
     }
}

3、完整的redux

//入口文件
import ReactDom from 'react-dom'
import App from './App'
import store from "./redux/store"
ReactDom.render(<App />,document.getElementById("root"))

// 监听store变化
store.subscribe(()=>{
    ReactDom.render(<App />,document.getElementById("root"))
})

//组件count文件
import React, { Component } from 'react'
//引入store
import store from "../../redux/store";
//引入action
import {createIncrementAction,createDecrementAction} from "../../redux/count_action"

export default class index extends Component {


    componentDidMount() {
        // 监听store状态变化,通过setState让render重新渲染实现新状态展示,为防治多个(成百上千)组件都要监听,在入口文件(index.js)监听即可
        // store.subscribe(()=>{
        //     this.setState({})
        // }) 
    }

    //increment
    increment = ()=>{
        //获取option的value
        const {value} = this.selectValue;
        //通知redux加value
        store.dispatch(createIncrementAction(value * 1))
    }

    //decrement
    decrement = ()=>{
        //获取option的value
        const {value} = this.selectValue;
        //通知redux加value
        store.dispatch(createDecrementAction(value * 1))
    }

    //incrementIfOdd
    incrementIfOdd = ()=>{
        const {value} = this.selectValue;
        if(store.getState() %2 !== 0){
            store.dispatch(createIncrementAction(value * 1))
        }
    }

    //incrementAsyns
    incrementAsyns = ()=>{
        const {value} = this.selectValue;
        setTimeout(() => {
            store.dispatch({
                type: "increment",
                data: value * 1,
            })
        },500)
    }

    render() {
        return (
            <div>
                <h1>当前值为{store.getState()}</h1>
                <select ref={cN => this.selectValue = cN}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick = {this.increment}>increment</button>
                <button onClick = {this.decrement}>decrement</button>
                <button onClick = {this.incrementIfOdd}>奇数加</button>
                <button onClick = {this.incrementAsyns}>延时加</button>
            </div>
        )
    }
}

//store文件
/*
    store
    该文件只有一个,用于暴露一个store对象
*/

//引入createStore,专门用于创建store对象
import {createStore} from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reducer"

export default createStore(countReducer)

//count组件的reducer文件
/*
    这是组件Count的reducer
    该文件是用于创建一个专门为Count组件服务的reducer,reducer的本质是一个函数
    reducer函数会接收两个参数,分别是 之前的状态preState,动作对象action
*/

// 引入type类型的常量
import {INCREMENT,DECREMENT} from "./constant"

//初始化的状态值
const initState = 0;
export default function countReducer (preState = initState,action) {
    // console.log(preState,action);
    //获取action对象的type及data
    const {type, data} = action;
    //判断类型,进行不同的操作(加减)
     switch (type) {
        case INCREMENT:
            return preState + data;
        case DECREMENT:
            return preState - data;
        default:
            return preState;
     }
}

//count组件的action文件
/* 
    该文件专门为Count组件生成Action对象
*/

// 引入type类型的常量
import {INCREMENT,DECREMENT} from "./constant"

export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//action的type类型的常量文件
/*
    该模块是用于定义action对象中type类型的常量值
*/
export const INCREMENT = "increment";
export const DECREMENT = "decrement";
ATWLee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-redux学习
m0_62118859的博客
04-30 447
目录 1.React-Redux介绍 2. React-Redux-基本使用 3.React-Redux-获取状态useSelector 4.React-Redux-分发动作useDispatch 5.理解 Redux 数据流 6.Redux应用-代码结构 7.Redux应用-ActionType的使用 8.Redux应用-Reducer的分离与合并 9.Redux应用-redux管理哪些状态 1.React-Redux介绍 目标： 能够说出为什么需要使用react-redux ..
Redux学习
02-21
在学习过程中，你可以参考官方文档、在线教程、视频课程以及实践项目来深入理解和应用Redux。随着React Hooks的出现，还有一种替代方案——`useContext`和自定义hooks，但Redux在大型项目中仍然有其独特的价值，特别...
redux学习总结与应用
Rookie
07-26 960
文章目录redux重要知识点Redux的三大原则StoreActionReducerRedux的三大核心之间的关系react与redux配合使用的流程原理 redux重要知识点 首先，我先给出我学习react框架的参考教程，以下内容都是我依据此教程的个人总结。 redux中文教程 redux 是 JavaScript 状态容器，提供可预测化的状态管理。redux与react之间本身并无直接关系，但是它俩可以完美的搭配使用。简单来说，在流行的MVC三层架构理念中，react主要负责View层数据渲染，那么re
React的学习路径——从菜鸟到大牛
热门推荐
yangxiaobo118的博客
04-05 2万+
如果你之前从未接触过React，你可能会对它的生态感到一头雾水。这可以理解，因为：1、React针对的是接受能力强的开发者和行业专家；2、Facebook仅将它实际生产中应用的框架开源了出来，因此它没有关注比Facebook量级小的项目；3、现在网上的React教程鱼龙混杂、良莠不齐。别太担心，如果你想开始学习React又不知道该从何学起的话，你不妨看看本文。当然，要学习React，你必须具备基本...
使用react实现select_实现 redux 与 react-redux 核心代码
weixin_42310231的博客
01-03 239
概览如果用简短的话概括 redux 的核心逻辑，我会说 redux 是 js 闭包的应用 + 合理的 api 形式。如果用简短的话概括 react-redux 的核心逻辑，我会说 react-redux 是 把 redux 与 react 生命周期挂钩 + 合理的 api 形式。从难度来看，掌握 redux 和 react-redux 确实比掌握 react 要简单很多，希望大家有所收获。js 闭...
Redux 学习笔记
qq_33003143的博客
10-20 166
学习Redux的笔记
redux 的学习记录
最新发布
shuaikang的博客
03-06 977
这里使用最多的是redux-thunk中间件，它使我们可以给dispatch传入一个异步函数，帮我们执行回调后修改state的内容。Dispatch（分发）： 一个函数，用于将 action 发送到 reducer，从而触发状态的变化。Reducer（处理器）： 一个纯函数，接收当前状态和一个 action，并返回一个新的状态。在步骤3中的dispatch(action)，action可能被多个地方使用，而类型是相同的，只有num不会变。整个应用的状态被保存在单一的 store 中。
Router+Redux学习总结
JavaAlliance
09-11 1350
一、React-Router配置路由 在实际应用中，我们不可能只有一页页面，切换页面需要通过Router配置，这样输入不同的url就能看到不同的页，或者点击不同的按钮可以在下方加载不同的组件。 （说明：这里补充一下组件的概念，其实其本质就是一个类。在页面中我们可以把页面分为导航区，侧边栏，工作区等不同区域，每个区域都是一个组件，组件中还可以继续细分为其他组件。想象在创建页面的时候把不同的组件拿来组...
Redux学习总结
越努力，越幸运！
07-16 1528
State State (也称为 state tree) 是一个宽泛的概念，但是在 Redux API 中，通常是指一个唯一的 state 值，由 store 管理且由 getState() 方法获得。它表示了 Redux 应用的全部状态，通常为一个多层嵌套的对象。 Action Action 是一个普通对象，用来表示即将改变 state 的意图。它是将数据放入 store 的唯一途径。
学习-redux
02-09
5. **Middleware**: Redux middleware 是插件机制，它们可以拦截 action 分发的过程，添加额外的功能，如日志记录、异步操作处理等。著名的 middleware 有 `redux-thunk` 和 `redux-saga`。 6. **React-Redux**: 当...
学习redux工具包
02-18
通过以上特性，Redux Toolkit 可以极大地简化 Redux 应用的开发过程，减少样板代码，并提高代码质量。在学习 Redux Toolkit 时，理解并熟练运用这些核心概念是至关重要的。实践项目，结合实际案例来应用这些工具，将...
Redux Demo
11-29
- 在开发过程中，Redux DevTools是一个非常有用的工具，它提供了一个可视化界面来跟踪Action的派发和State的变化，有助于调试和优化应用。 通过这个"Redux Demo"，你可以实践这些理论知识，更深入地理解如何在实际...
Redux菜鸡计数器
07-18
通过阅读`React项目的起步配置过程.docx`文档和分析`01redux菜鸡计数器`中的代码，你将能够深入理解这两个库是如何协同工作的，并且掌握在实际项目中如何应用这些技术。这是一个很好的起点，对于想要学习现代前端...
纯Web前端打造的元宇宙展厅——开箱即用的Lingo3D游戏引擎 支持原生、React、Vue
BWater_monster的博客
05-10 5989
Lingo3D，开箱即用的Web游戏引擎。期待PUBG的web端。
Swiper实现手风琴式的图片展示
BWater_monster的博客
04-27 3390
基础的Swiper+简单的过度动画实现图片手风琴效果
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
BWater_monster的博客
07-23 2477
Echarts的二次封装思考心得。
从0开始搭建一个Monorepo模版，基于Turborepo+pnpm+changesets+dumi
BWater_monster的博客
08-09 2465
基于Turborepo+pnpm+changesets+dumi，搭建的多包组件库模版
Redux深度指南：从入门到高级实战
这部分会解答开发者在使用Redux过程中遇到的常见疑问，帮助解决疑难杂症。 **7. 词汇表与API文档** - createStore: 创建一个新的store。 - Store实例方法: 如combineReducers、applyMiddleware等。 - React-Redux...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值