尚硅谷-react教程-求和案例-最终版-笔记

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 "./containers/Count"; // 引入的Count的容器组件
import Person from "./containers/Person"; // 引入的Person的容器组件

class App extends Component {
    render() {
        return (
            <div>
                <Count/>
                <hr/>
                <Person/>
            </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'
import {Provider} from 'react-redux'

ReactDOM.render(
    /* 此处需要用Provider包裹App,目的是让App所有的后代容器组件都能接收到store */
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)

src/redux/constant.js

javascript 复制代码

/**
 * 该模块是用于定义action对象中type类型的常量值,目的只有一个：
 *      便于管理的同时防止程序员单词写错
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

export const ADD_PERSON = 'addperson'

src/redux/store.js

javascript 复制代码

/*
*  该文件专门用于暴露一个store对象，整个应用只有一个store对象
* */

// store.js
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入redux-thunk，用于支持异步action
import {thunk} from 'redux-thunk'
//引入redux-devtools-extension
import { composeWithDevTools } from '@redux-devtools/extension';
// 引入汇总之后的reducer
import reducer from "./reducers";
//导出store
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

(1).Count组件相关的

src/containers/Count/index.jsx

javascript 复制代码

import React, {Component} from 'react';
// 引入action
import {
    decrement,
    increment,
    incrementAsync
} from '../../redux/actions/count'

// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

// 定义UI组件
class Count extends Component {
    // count已经交给了redux去管理了
    state = {carName:'奔驰c63'}
    // 加法
    increment=()=>{
        const {value} = this.selectNumber
        this.props.increment(value*1)
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.decrement(value*1)
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count %2 !== 0) {
            this.props.increment(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.props.incrementAsync(value*1,500)
    }
    render() {
        return (
            <div>
                <h2>我是Count组件,下方组件总人数为:{this.props.personCount}</h2>
                <h4>当前求和为：{this.props.count}</h4>
                <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>
        );
    }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state =>({
        count:state.count,
        personCount:state.personList.length
    }),
    // mapDispatchToProps的精简写法
    { increment,decrement,incrementAsync }
)(Count)

src/redux/actions/count.js

javascript 复制代码

/*
* 该文件专门为Count组件生成action对象
* */
import {INCREMENT,DECREMENT} from '../constant'

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

// 异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的
export const incrementAsync = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(increment(data))
        },time)
    }
}

src/redux/reducers/count.js

javascript 复制代码

/*
* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
* 2.reducer函数会接到两个参数，分别为: 之前的状态（preState），动作对象(action)
* */
import {INCREMENT,DECREMENT} from '../constant'

// 初始化版本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
    }
}

(2).Person组件相关的

src/containers/Person/index.jsx

javascript 复制代码

import React, {Component} from 'react';
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {addPerson} from "../../redux/actions/person";

class Person extends Component {
    addPerson = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value*1
        const personObj = {id:nanoid(),name,age}
        this.props.addPerson(personObj)
        this.nameNode.value = ''
        this.ageNode.value = ''
    }
    render() {
        return (
            <div>
                <h2>我是Person组件,上方组件求和为{this.props.count}</h2>
                <input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/>
                &nbsp;<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
                &nbsp;<button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.personList.map((p)=>{
                            return <li key={p.id}>名字{p.name}---年龄{p.age}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default connect(
    state => ({
        personList:state.personList,
        count:state.count
    }), // 映射状态
    {addPerson}// 映射操作状态的方法
)(Person)

src/redux/actions/person.js

javascript 复制代码

import {ADD_PERSON} from "../constant";

// 创建增加一个人的action动作对象
export const addPerson = personObj=>({type:ADD_PERSON,data:personObj})

src/redux/reducers/person.js

javascript 复制代码

import {ADD_PERSON} from "../constant";

// reducer就是专门初始化和加工状态的

// 初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]
export default function personReducer(preState=initState,action) {
    const {type,data}= action
    switch (type) {
        case ADD_PERSON: // 若是添加一个人
            // preState.unshift(data) // 此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了，就会影响redux不能够识别状态的改变
            return [data,...initState] // 把新加的人放前边
        default:
            return preState
    }
}

该文件用于汇总所有的reducer为一个总的reducer：src/redux/reducers/index.js

javascript 复制代码

/*
* 该文件用于汇总所有的reducer为一个总的reducer
* */
// 引入combineReducers,用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import personList from './person'

// 汇总所有的reducer变为一个总的reducer
export default combineReducers({
    count,
    personList
})

复制代码

## 8.求和案例_react-redux最终版
    (1).所有变量名字要规范，尽量触发对象的简写形式
    (2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer