我是靠谱客的博主 俊秀往事,最近开发中收集的这篇文章主要介绍React学习27(react-redux多组件共享数据)项目结构 准备工作代码展示纯函数,觉得挺不错的,现在分享给大家,希望可以做个参考。
概述
项目结构
准备工作
1)定义一个person组件,和count组件通过redux共享数据
2)为person组件编写:reducer ,action和contant常量
3)重点:Person的reducer和Count的reducer要用combineReducers进行合并,合并后的总状态
是 一个对象
4)交给store的是总的reducer,最后注意在组件中取出状态的时候,记得取到位
代码展示
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import store from './redux/store'//为provider服务
import {Provider} from 'react-redux'
ReactDOM.render(
<Provider store= {store}>
<App/>
</Provider>,
document.getElementById('root')
)
// 检测redeux中状态的改变,若redux的状态发生了改变,那么重新渲染App组件
//使用react-redux创建容器组件后,react-redux可以自己实现检测state中状态的改变,所以可以删除
//以下代码
// store.subscribe(() => {
// ReactDOM.render(<App/>,document.getElementById('root'))
// })
App.jsx
import React, { Component } from 'react'
import Count from './containers/Count'
import Person from './containers/Person'
export default class App extends Component {
render() {
return (
<div>
<Count/>
<hr/>
<Person/>
</div>
)
}
}
redux-store.js
/*
该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/
//引入createStore,专门用于创建redux中最为核心的store对象,applyMiddleware用于支持
//异步action的中间件
//combineReducers用于合并多个reducer
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变为一个总的reducers
const allReducer = combineReducers({
he:countReducer,
rens:personReducer
})
export default createStore(allReducer, applyMiddleware(thunk))
redux-content.js
/*
该文件是用于定义action对象中的type类型的常量值
目的只有一个:防止程序员在编码的同时单次写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'
redux-actions-count.jsx
/*
该文件专门为count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "../constant"
//完整写法
// function createIncrementAction(data) {
// return {type:'increment', data }
// }
//简写形式
//同步action,就是值action的返回值是Object类型的一般对象
export const createIncrementAction = data =>( {type:INCREMENT, data })
//完整写法
// function createDecrementAction(data) {
// return {type:'decrement', 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)
}
}
redux-actions-person.js
import {ADD_PERSON} from '../constant'
//创建增加一个人的action对象
export const creatAddPersonAction = personObj => ({type:ADD_PERSON, data:personObj})
redux-reducers-count.js
/*
1.该文件用于创建一个为count组件服务的reducer,reducer的本质就是一个函数
2.reducer函数会接到两个参数,分别是之前的state(状态)和action(动作对象)
*/
import { INCREMENT, DECREMENT } from "../constant";
const initState = 0
export default function countReducer(preState=initState, action) {
console.log(preState, action);
//从action对象中获取type, data
const {type, data} = action
//根据type类型决定如何加工
switch (type) {
case INCREMENT:// 如果是加
return preState + data
case DECREMENT:// 如果是减
return preState - data
default:
return preState
}
}
redux-reducers-person.js
import { ADD_PERSON } from "../constant"
//初始化人的列表
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, ...preState]// 若是添加一个人
default:
return preState
}
}
containers-count-index.jsx
//引入CountUI组件
// import CountUI from '../../compoents/Count'
import React, { Component } from 'react'
//引入connect用于连接UI组件和redux
import {connect} from 'react-redux'
//引入action
import {
createIncrementAction,
createDecrementAction,
createIncrementAsyncAction
} from '../../redux/actions/count'
//定义UI组件
class Count extends Component {
state = {carName:'奔驰c63'}// 把状态交给reducer之后组件也可以有自己独用的状态
increment = () => {
const {value} = this.selectNum
this.props.jia(value*1)
}
decrement = () => {
const {value} = this.selectNum
this.props.jian(value*1)
}
incrementOdd = () => {
const {value} = this.selectNum
if(this.props.count % 2 !== 0) {
this.props.jia(value*1)
}
}
incrementWait = () => {
const {value} = this.selectNum
this.props.jiaAsync(value*1,400)
}
render() {
console.log('UI组件接收到的props是:',this.props);
return (
<div>
<h2>我是Count组件,下方组件总人数是{this.props.renshu}</h2>
<h3>当前求和为:{this.props.count}</h3>
<select ref={c => {this.selectNum = 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.incrementOdd}>当前求和为奇数再加</button>
<button onClick= {this.incrementWait}>等一等再加</button>
</div>
)
}
}
//使用connect()()创建并暴露一个Count容器组件
export default connect(
state => ( {count:state.he,renshu:state.rens.length}),
//mapDispatchToProps的一般写法
// dispatch => ({
// jia:number => dispatch(createIncrementAction(number)),
// jian:number => dispatch(createDecrementAction(number)),
// jiaAsync:(number,time) =>dispatch(createIncrementAsyncAction(number,time))
// })
//mapDispatchToProps的简写,dispatch由react-redux来完成,程序员工作中用这种方法
{
jia:createIncrementAction,
jian:createDecrementAction,
jiaAsync:createIncrementAsyncAction
}
)(Count)
containers-Person-index.jsx
import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {creatAddPersonAction} 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:creatAddPersonAction}//映射操作状态的方法
)(Person)
纯函数
A、一类特别的函数:只要是同样的输入(实参),必定得到同样的输出(返回)
B、必须遵循以下的一些约束
不得改写参数数据;
不会产生任何副作用,例如:网络请求,输入和输出设备;
不能调用Date.now()或者是Math.random()等不纯的方法
C、redux的reducer函数必须是一个纯函数
最后
以上就是俊秀往事为你收集整理的React学习27(react-redux多组件共享数据)项目结构 准备工作代码展示纯函数的全部内容,希望文章能够帮你解决React学习27(react-redux多组件共享数据)项目结构 准备工作代码展示纯函数所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复