尚硅谷-react教程-求和案例-redux完整版-笔记

  • 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} 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({type:'increment',data:value*1})
            store.dispatch(createIncrementAction(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
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
  • 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对象
* */

// 引入createStore,专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 暴露store
export default createStore(countReducer)
复制代码
## 2.求和案例_redux完整版
    新增文件:
        1.count_action.js 专门用于创建action对象
        2.constant.js 放置由于编码疏忽写错action中的type
相关推荐
使一颗心免于哀伤10 分钟前
《设计模式之禅》笔记摘录 - 6.原型模式
笔记·设计模式
刘孬孬沉迷学习14 分钟前
5G标准学习笔记15 --CSI-RS测量
网络·笔记·学习·5g·信息与通信·信号处理
给自己记录用1 小时前
qt笔记(1)——Qtablewidget使用
笔记·qt
飞升不如收破烂~1 小时前
英语学习笔记2.0
笔记·学习
金色光环1 小时前
概率论:理解区间估计【超详细笔记】
笔记·数学·概率论·数理统计·区间估计
大佐不会说日语~2 小时前
JVM垃圾回收机制面试笔记
jvm·笔记·面试
梁辰兴2 小时前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
陈洪奇9 小时前
注册中心学习笔记整理
笔记·学习
兴趣使然_13 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
aramae14 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio