尚硅谷-react教程-求和案例-异步action版-笔记

  • public/index.html
html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>redux</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>
  • src/App.jsx
javascript 复制代码
import React, {Component} from 'react';
import Count from "./components/Count";

class App extends Component {
    render() {
        return (
            <div>
                <Count/>
            </div>
        );
    }
}

export default App;
  • src/index.js
javascript 复制代码
import React from "react";
import ReactDOM from 'react-dom'
import App from './App'

import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))
// 检测redux中状态的变化,只要变化,就调用render
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById('root'))
})
  • src/components/Count/index.jsx
javascript 复制代码
import React, {Component} from 'react';
// 引入store,用于获取redux中保存状态
import store from '../../redux/store'
// 引入actionCreator,专门用于创建action对象
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
class Count extends Component {
    // count已经交给了redux去管理了
    state = {carName:'奔驰c63'}

    // componentDidMount() {
    //     // 检测redux中状态的变化,只要变化,就调用render
    //     store.subscribe(()=>{
    //         this.setState({})
    //     })
    // }

    // 加法
    increment=()=>{
        const {value} = this.selectNumber
        // 通知redux加value
        // store.dispatch({type:'increment',data:value*1})
        store.dispatch(createIncrementAction(value*1))
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        // store.dispatch({type:'decrement',data:value*1})
        store.dispatch(createDecrementAction(value*1))
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        const count = store.getState()
        if(count % 2 !== 0) {
            // store.dispatch({type:'increment',data:value*1})
            store.dispatch(createIncrementAction(value*1))
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        // setTimeout(()=>{
            // store.dispatch(createIncrementAction(value*1))
        // },500)
        store.dispatch(createIncrementAsyncAction(value*1,500))
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        );
    }
}

export default Count;
  • src/components/redux/constant.js
javascript 复制代码
/**
 * 该模块是用于定义action对象中type类型的常量值,目的只有一个:
 *      便于管理的同时防止程序员单词写错
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
  • src/components/redux/count_action.js
javascript 复制代码
/*
* 该文件专门为Count组件生成action对象
* */
import {INCREMENT,DECREMENT} from './constant'
/*
// 版本1
function createIncrementAction (data) {
    return {type:'increment',data}
}

function createDecrementAction (data) {
    return {type:'decrement',data}
}*/

// 版本2
// 同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

// 异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的
export const createIncrementAsyncAction = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}
  • src/components/redux/count_reducer.js
javascript 复制代码
/*
* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
* 2.reducer函数会接到两个参数,分别为: 之前的状态(preState),动作对象(action)
* */
import {INCREMENT,DECREMENT} from './constant'
// 初始化版本1
/*
function countReducer(preState,action) {
    if(preState === undefined) preState = 0
    // 从action对象中获取:type,data
    const {type,data} = action
    // 根据type决定如何加工数据
    switch (type) {
        case 'increment': // 如果是加
            return preState + data
        case 'decrement': // 如果是减
            return preState - data
        default:
            return preState
    }
}*/

// 初始化版本2
const initState = 0
export default function countReducer(preState=initState,action) {
    // 从action对象中获取:type,data
    const {type,data} = action
    // 根据type决定如何加工数据
    switch (type) {
        case INCREMENT: // 如果是加
            return preState + data
        case DECREMENT: // 如果是减
            return preState - data
        default:
            return preState
    }
}
  • src/components/redux/store.js
javascript 复制代码
/*
*  该文件专门用于暴露一个store对象,整个应用只有一个store对象
* */

// store.js
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import {thunk} from 'redux-thunk'
//导出store
export default createStore(countReducer,applyMiddleware(thunk))
复制代码
## 3.求和案例_redux异步action版
    (1).明确:延迟的动作不想交给组件自身,想交给actionA
    (2).何时需要异步action:想要对状态进行操作,但是具体A的数据靠异步任务返回
    (3).具体编码:
        1).yarn add redux-thunk,并配置在store中
        2).创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务
        3).异步任务有结果后,分发一个同步的action去真正操作数据
    (4).备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action
相关推荐
fen_fen18 分钟前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
饕餮争锋4 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式
萝卜青今天也要开心4 小时前
2025年上半年软件设计师考后分享
笔记·学习
吃货界的硬件攻城狮5 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习
蓝染yy5 小时前
Apache
笔记
lxiaoj1116 小时前
Python文件操作笔记
笔记·python
半导体守望者7 小时前
ADVANTEST R4131 SPECTRUM ANALYZER 光谱分析仪
经验分享·笔记·功能测试·自动化·制造
啊我不会诶8 小时前
倍增法和ST算法 个人学习笔记&代码
笔记·学习·算法
逼子格8 小时前
振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
笔记·嵌入式硬件·硬件工程·硬件工程师·硬件工程师真题·multisim电路仿真·震荡电流
一条破秋裤9 小时前
一份多光谱数据分析
笔记·数据挖掘·数据分析