1、目录结构
2、containers/Count/index.js
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/action/count'
//引入conect用于链接UI组件与redux
import {connect} from 'react-redux'
import React, {Component} from "react";
class Count extends Component {//加法increment=()=>{const {value} = this.selectNumthis.props.jia(Number(value))}//减法decrement=()=>{const {value} = this.selectNumthis.props.jian(Number(value))}//奇数加incrementIfOdd=()=>{const {value} = this.selectNumconst {count} = this.propsif(count%2!==0) {this.props.jia(Number(value))}}//异步加incrementAsync=()=>{const {value} = this.selectNumthis.props.jiaAsync(Number(value),500)}render(){console.log('UI组件接收到的props是',this.props)return(<div><h1>Coun组件</h1><h4>当前求和为：{this.props.count},下方总人数为：{this.props.personNum}</h4><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.incrementIfOdd}>当前求和为奇数在加</button> <button onClick={this.incrementAsync}>异步加</button> </div>);}
}
//使用connect()()创建
export default connect(state=>({count:state.count,personNum:state.persons.length}),{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction}
)(Count)containers/Person/index.js
import React, {Component} from "react";
import {connect} from 'react-redux'
//引入personACTion
import {createAddPersonAction} from '../../redux/action/person'
//引入nanoid
import {nanoid} from 'nanoid';
class Person extends Component {addPerson=()=> {const name=this.nameNode.value;const age=this.ageNode.value;const personObj={id:nanoid(),name,age};console.log(personObj);this.props.createAddPersonAction(personObj)this.nameNode.value='';this.ageNode.value='';}render(){return(<div><h1>我是Peson组件,上方求和为：{this.props.sum}</h1><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.persons.map(item=>{return <li key={item.id}>{item.name}---{item.age}</li>})}</ul></div>);}
}
export default connect(state=>({persons:state.persons,sum:state.count}),{createAddPersonAction}
)(Person)
3、redux/action/count.js
/*该文件专门为Count组件生成action对象*/
import {INCREMENT,DECREMENT} from '../constant'
import store from "../store";
// function createIncrementAction(data){
// return {type:'increment',data}
// }
export const createIncrementAction = data=>({type:INCREMENT,data})
// function createDecrementAction(data){
// return {type:'decrement',data}
// }
//同步action,就是形参为data，返回值为action对象
export const createDecrementAction = data=>({type:DECREMENT,data})// export default {
// createIncrementAction,
// createDecrementAction
// }
//所谓的异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data,time)=>{return ()=>{setTimeout(()=>{//通知reduxstore.dispatch(createIncrementAction(data))},time)}
}redux/action/person.js
//引入常量
import {ADD_PERSON} from '../constant'
//创建一个添加person的action
export const createAddPersonAction = personObj=> {return {type:ADD_PERSON,data:personObj}
}
redux/reducers/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',preState,action)const {type,data} = action// 根据type决定如何加工数据switch (type){case INCREMENT:console.log('@')return preState + datacase DECREMENT:return preState - datadefault:return preState}
}
redux/reducers/person.js
//引入常量
import {ADD_PERSON} from '../constant'
//初始化state
const initState=[{id:1,name:'Tom',age:18
}]export default function personReducer(preState=initState,action){const {type,data} = actionswitch (type){case ADD_PERSON:return [data,...preState]default:return preState}
}
redux/constant.js
/*该模块用于定义状态管理的常量名称,目的只有一个:便于管理的同时，防止程序员单词拼写错误
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'
redux/store,js
/*该文件专门用于创建一个为Count组件服务的store对象*/
//引入createStore,专门创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入cunter.redux.js文件
import countReducer from './reducers/count'
//引入personReducer文件
import personReducer from './reducers/person'
//引入redux-thunk用于支持异步action
import {thunk} from 'redux-thunk'
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'
//汇总所有reducer
const allReducer = combineReducers({count:countReducer,persons:personReducer
})
//暴露store applyMiddleware(thunk)
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
4、src/App.js
import React, {Component} from "react";
import Count from "./containers/Count";
import Person from "./containers/Person";
//引入store
// import store from "./redux/store";
export default class App extends Component {render(){return(<div><Count></Count><hr/><Person></Person></div>);}
}
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={store}><App/></Provider>,document.getElementById('root'))