import {ADD_PERSON} from ‘…/constant’
//创建增加一个人的action动作对象
export const addPerson = personObj => ({type:ADD_PERSON,data:personObj})
- 统一常量管理
/*
该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = ‘increment’
export const DECREMENT = ‘decrement’
export const ADD_PERSON = ‘add_person’
count.js
/*
1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from ‘…/constant’
const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
// console.log(‘countReducer@#@#@#’);
//从action对象中获取：type、data
const {type,data} = action
//根据type决定如何加工数据
switch (type) {
case INCREMENT: //如果是加
return preState + data
case DECREMENT: //若果是减
return preState - data
default:
return preState
}
}
person.js
import {ADD_PERSON} from ‘…/constant’
//初始化人的列表
const initState = [{id:‘001’,name:‘tom’,age:18}]
export default function personReducer(preState=initState,action){
// console.log(‘personReducer@#@#@#’);
const {type,data} = action
switch (type) {
case ADD_PERSON: //若是添加一个人
//preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。
return [data,…preState]
default:
return preState
}
}
index.js — 汇总所有的reducer
/*
该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import {combineReducers} from ‘redux’
//引入为Count组件服务的reducer
import count from ‘./count’
//引入为Person组件服务的reducer
import persons from ‘./person’
//汇总所有的reducer变为一个总的reducer
export default combineReducers({
count,
persons
})
- store对象存储
/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from ‘redux’
//引入汇总之后的reducer
import reducer from ‘./reducers’
//引入redux-thunk，用于支持异步action
import thunk from ‘redux-thunk’
//引入redux-devtools-extension
import {composeWithDevTools} from ‘redux-devtools-extension’
//暴露store
export default createStore(reducer,composeWithDevTools(appl
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
yMiddleware(thunk)))
- 创建组件使用store数据
Count
import React, { Component } from ‘react’
//引入action
import {
increment,
decrement,
incrementAsync
} from ‘…/…/redux/actions/count’
//引入connect用于连接UI组件与redux
import {connect} from ‘react-redux’
//定义UI组件
class Count extends Component {
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() {
//console.log(‘UI组件接收到的props是’,this.props);
return (
我是Count组件,下方组件总人数为:{this.props.renshu}
当前求和为：{this.props.count}
<select ref={c => this.selectNumber = c}>
1 2 3
+
-
当前求和为奇数再加
异步加
)
}
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
state => ({
count:state.count,
personCount:state.persons.length
}),
{increment,decrement,incrementAsync}
)(Count)
Person
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 (
我是Person组件,上方组件求和为{this.props.count}
<input ref={c=>this.nameNode = c} type=“text” placeholder=“输入名字”/>
<input ref={c=>this.ageNode = c} type=“text” placeholder=“输入年龄”/>
添加
{
this.props.persons.map(§=>{
return
- {p.name}–{p.age}
-
})
}