尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记
#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.selectNumber
this.props.jia(value*1)
}
// 减法
decrement=()=>{
const {value} = this.selectNumber
this.props.jian(value*1)
}
// 奇数再加
incrementIfOdd=()=>{
const {value} = this.selectNumber
if(this.props.count %2 !== 0) {
this.props.jia(value*1)
}
}
// 异步加
incrementAsync=()=>{
const {value} = this.selectNumber
this.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>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
<button onClick={this.incrementAsync}>异步加</button>
</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,data
const {type,data} = action
// 根据type决定如何加工数据
switch (type) {
case INCREMENT: // 如果是加
return preState + data
case DECREMENT: // 如果是减
return preState - data
default:
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.value
const age = this.ageNode.value
const 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="输入名字"/>
<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
<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}= action
switch (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,最后注意在组件中取出状态的时候，记得"取到位"