尚硅谷-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
相关推荐
啊我不会诶1 小时前
倍增法和ST算法 个人学习笔记&代码
笔记·学习·算法
逼子格1 小时前
振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
笔记·嵌入式硬件·硬件工程·硬件工程师·硬件工程师真题·multisim电路仿真·震荡电流
一条破秋裤2 小时前
一份多光谱数据分析
笔记·数据挖掘·数据分析
zstar-_2 小时前
【算法笔记】6.LeetCode-Hot100-链表专项
笔记·算法·leetcode
程序员Xu3 小时前
【OD机试题解法笔记】连续出牌数量
笔记·算法·深度优先
彤银浦3 小时前
Web学习笔记2
笔记·学习
长风破浪会有时呀3 小时前
Git 学习笔记
笔记·git·学习
偷偷的卷3 小时前
【算法笔记 day three】滑动窗口(其他类型)
数据结构·笔记·python·学习·算法·leetcode
凤年徐4 小时前
【数据结构】时间复杂度和空间复杂度
c语言·数据结构·c++·笔记·算法
茫忙然4 小时前
【WEB】Polar靶场 Day8 详细笔记
笔记