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

成熟的项目中，会在src文件目录里，新建redux用于集中管理关于redux的操作；在redux中新建actions文件夹用于集中管理redux_action的操作；新建reducers文件夹用于集中管理诸多reducer。

一、组件

Person组件

javascript 复制代码

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 onClick="this.addPerson">添加</button>
    }
}

改变Preson组件为容器组件并拿到reducer中存储的初始值进行渲染

javascript 复制代码

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(){
        <p>Count组件求和为{this.props.he}</p>
        <input ref={ c => this.nameNode = c  } placeholder="请输入姓名" />
        <input ref={ c => this.ageNode = c  } placeholder="请输入年龄" />
        <button onClick="this.addPerson">添加</button>
        <ul>
            {
                this.props.preson.map(p=>{
                    return <li key={p.id}>{p.name}---{p.age}<li/>
                })
            }
        </ul>
    }
}

export default connect(
    state =>( {
        persons：state.rens,
        he:state.he//跨组件共享数据
    } ),//因为模块五汇总了reducer
    { jiaYiRen:createAddPersonAction}//映射操作状态的方法
)

Count组件

javascript 复制代码

 
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 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>
    )
}
 
export default connect(
    //state => {( count：state )}},因为模块五汇总了reducer，而总的reducer不单单是一个number，而是一个对象，所以获取发生了变化
    state => {( 
        count：state.he,
        renshu:state.rens.length,//跨组件获取共享数据
    )},
    {
        jia：createIncrementAction,
        jian：createDecrementAction,
        jiaAsync：createIncrementAsyncAction,
    }
)(Count)

二、constant

与actions文件夹同级别的constant文件用于定义action对象中type类型的常量值

javascript 复制代码

export const INCREMENT = "increment"
export const DECREMENT = "decrement"
export ADD_PERDON = "add_person"

三、action

在actions文件夹中新建person.js文件，用于管理Preson组件用到的action

javascript 复制代码

import { ADD_PERSON } from "../constant"

export const createAddPersonAction = (personObj) =>( { type : ADD_PERSON,data:personObj} ){
    
}

在actions文件夹中新建count.js文件，用于管理Count组件用到的action

javascript 复制代码

import { INCREMENT，DECREMENT } 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)
    }
}

四、reducer

1、在reducers文件夹新建person.js文件，用于管理Preson组件用到的redux

javascript 复制代码

import { 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组件用到的redux

javascript 复制代码

import { 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文件

javascript 复制代码

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文件

javascript 复制代码

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 />
    }
}