当前位置：首页 > news >正文

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

news 2025/7/17 21:11:54

#1024程序员节｜征文#

public/index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>redux</title></head><body><div id="root"></div></body>
</html>

src/App.jsx

import React, {Component} from 'react';
import Count from "./containers/Count";
import Person from "./containers/Person";class App extends Component {render() {return (<div><Count/><hr/><Person/></div>);}
}export default App;

src/index.js

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批量的给整个应用里面的所有的容器组件的添加store<Provider store={store}><App/></Provider>,document.getElementById('root')
)

src/redux/constant.js

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

src/redux/store.js

/*
*  该文件专门用于暴露一个store对象，整个应用只有一个store对象
* */// store.js
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入为Person组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import {thunk} from 'redux-thunk'
// 合并多个reducer
const allReducer = combineReducers({he:countReducer,rens:personReducer
})
//导出store
export default createStore(allReducer,applyMiddleware(thunk))

（一）Count组件相关的

src/containers/Count/index.jsx

import React, {Component} from 'react';
// 引入action
import {createDecrementAction,createIncrementAction,createIncrementAsyncAction
} 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.selectNumberthis.props.jia(value*1)}// 减法decrement=()=>{const {value} = this.selectNumberthis.props.jian(value*1)}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberif(this.props.count %2 !== 0) {this.props.jia(value*1)}}// 异步加incrementAsync=()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {return (<div><h2>我是Count组件,下方组件总人数为:{this.props.renshu}</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.he,renshu:state.rens.length}),// mapDispatchToProps的精简写法{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(Count)

src/redux/actions/count.js

/*
* 该文件专门为Count组件生成action对象
* */
import {INCREMENT,DECREMENT} from '../constant'// 版本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/redux/reducers/count.js

/*
* 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,dataconst {type,data} = action// 根据type决定如何加工数据switch (type) {case INCREMENT: // 如果是加return preState + datacase DECREMENT: // 如果是减return preState - datadefault:return preState}
}

（二）Person组件相关的

src/containers/Person/index.jsx

import React, {Component} from 'react';
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPersonAction} from "../../redux/actions/person";class Person extends Component {addPerson = ()=>{const name = this.nameNode.valueconst age = this.ageNode.valueconst personObj = {id:nanoid(),name,age}this.props.jiaYiRen(personObj)this.nameNode.value = ''this.ageNode.value = ''}render() {return (<div><h2>我是Person组件,上方组件求和为{this.props.he}</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.yiduiren.map((p)=>{return <li key={p.id}>名字{p.name}---年龄{p.age}</li>})}</ul></div>);}
}export default connect(state => ({yiduiren:state.rens,he:state.he}), // 映射状态{jiaYiRen: createAddPersonAction}// 映射操作状态的方法
)(Person)

src/redux/actions/person.js

import {ADD_PERSON} from "../constant";// 创建增加一个人的action动作对象
export const createAddPersonAction = personObj=>({type:ADD_PERSON,data:personObj})

src/redux/reducers/person.js

import {ADD_PERSON} from "../constant";// reducer就是专门初始化和加工状态的// 初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]
export default function personReducer(preState=initState,action) {const {type,data}= actionswitch (type) {case ADD_PERSON: // 若是添加一个人return [data,...initState] // 把新加的人放前边default:return preState}
}

相较于这篇文章，尚硅谷-react教程-求和案例-数据共享(上篇)-编写Person组件的reducer-笔记-CSDN博客

做的改动是：

src/redux/store.js

src/containers/Count/index.jsx

src/containers/Person/index.jsx

最终效果：

## 6.求和案例_react-redux 数据共享版(1).定义一个Person组件，和Count组件通过redux共享数据(2).为Person组件编写: reducer,action，配置constant常量(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象!!!(4).交给store的是总reducer,最后注意在组件中取出状态的时候，记得"取到位"

查看全文

http://www.lryc.cn/news/472764.html