Redux实战：组件状态管理全解析

成熟的项目中会在src文件目录里新建redux用于集中管理关于redux的操作在redux中新建actions文件夹用于集中管理redux_action的操作新建reducers文件夹用于集中管理诸多reducer。一、组件Person组件import React, { Component } fron react export default class Person extends Component { addPerson () { const name this.nameNode.value const age this.ageNode.value const personObj { id:newDate(),name,age } } render(){ input ref{ c this.nameNode c } placeholder请输入姓名 / input ref{ c this.ageNode c } placeholder请输入年龄 / button onClickthis.addPerson添加/button } }改变Preson组件为容器组件并拿到reducer中存储的初始值进行渲染import React, { Component } fron react 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:newDate(),name,age } this.props.jiaYiRen(personObj) this.nameNode.value this.ageNode.value } render(){ pCount组件求和为{this.props.he}/p input ref{ c this.nameNode c } placeholder请输入姓名 / input ref{ c this.ageNode c } placeholder请输入年龄 / button onClickthis.addPerson添加/button ul { this.props.preson.map(p{ return li key{p.id}{p.name}---{p.age}li/ }) } /ul } } export default connect( state ( { personsstate.rens, he:state.he//跨组件共享数据 } ),//因为模块五汇总了reducer { jiaYiRen:createAddPersonAction}//映射操作状态的方法 )Count组件import { React{ Component } } from react //引入store import store from ../redux/store //引入createIncrementAction、createDecrementAction、createIncrementAsyncAction 。。。。。 //引入connect用于连接UI组件与redux import { connect } from react-redux class Count extends Component { state { car:0 } increment () { const { value } this.selectNumber } decrement () { const { value } this.selectNumber } incrementIfOdd () { const { value } this.selectNumber } incrementAsync () { const { value } this.selectNumber } render( div h1当前求和为{ this.props.count },下方组件总人数为{ this.props.renshu }/h1 select ref{ c this.selectNumber c } option value11/option option value22/option option value33/option /select button onClick { this.increment }/button button onClick { this.decrement }-/button button onClick { this.incrementIfOdd }当前求和为奇数再加/button button onClick { this.incrementAsync }异步加/button /div ) } export default connect( //state {( countstate )}},因为模块五汇总了reducer而总的reducer不单单是一个number而是一个对象所以获取发生了变化 state {( countstate.he, renshu:state.rens.length,//跨组件获取共享数据 )}, { jiacreateIncrementAction, jiancreateDecrementAction, jiaAsynccreateIncrementAsyncAction, } )(Count)二、constant与actions文件夹同级别的constant文件用于定义action对象中type类型的常量值export const INCREMENT increment export const DECREMENT decrement export ADD_PERDON add_person三、action在actions文件夹中新建person.js文件用于管理Preson组件用到的actionimport { ADD_PERSON } from ../constant export const createAddPersonAction (personObj) ( { type : ADD_PERSON,data:personObj} ){ }在actions文件夹中新建count.js文件用于管理Count组件用到的actionimport { INCREMENTDECREMENT } from ./constant.js //同步action就是指action的值为Object类型的一般对象 export const createIncrementAction data { ( type:INCREMENT,data ) } export const createDecrementAction data { ( type:DECREMENT,data ) } //异步action就是指action的值为函数,异步action中一般会调用同步action export const createDecrementAsyncAction (data,time) { return () { setTimeout((){ //store.dispatch({ type:INCREMENT,data }) dispatch(createIncrementAction(data)) },time) } }四、reducer1、在reducers文件夹新建person.js文件用于管理Preson组件用到的reduximport { ADD_PERSON } from ../constant const initState [ { name:Tom,age:18 } ] //初始数据 export default function personReducer(preState initState,action){ const { type,data } action switch (type) { case ADD_PERSON: return [ data,...preState ] dafault: return preState } }2、在reducers文件夹新建count.js文件用于管理Count组件用到的reduximport { INCREMENT,DECREMENT } from ../contant const initState 0 //初始状态 export default function countReducer( preState initState,action ){ const { type,action } action switch ( type ) { case INCREMENT: return preSate data case DECREMENT: return preState - date dafault: return preSatet } }五、与actions、reducers文件夹同级别的store.js文件import { createStore,applyMiddleware,combineReducers } from redux import countReducer from ./reducers/count import presonReducer from ./reducers/person import thunk from redux-thunk //用于支持异步action //汇总所有的reducer变为一个总的reducer const allReducer combineReducers({ he:countReducer, rens:presonReducer }) //export dafult createStore(countReducer,applyMiddleware(thunk)) 单个reducer无法传入多个 export dafult createStore(allReducer,applyMiddleware(thunk))六、App.jsx文件import React{ Component } from react import Person from ./containers/Person import Count from ./containers/Count export default class App extends from Component { render() { Count / Person / } }