React学习笔记十——用react-redux实现多组件数据共享案例

一时失言乱红尘 2022-10-11 15:53 9阅读 0赞

在笔记八和九介绍了react结合redux在组件内的使用方法，接下来我们就要真正的取利用redux实现多组件之间的数据共享；

下面我们把笔记九**Count组件**和redux通信的案例代码拿过来，再新增个**Person组件**，实现两个**组件的数据共享**；

--------------------

## 多组件数据共享知识点 ##

**1.使用combineReducers去合并所有组件的reducer的值到一个对象内**

import { combineReducers} from "redux"
     //引入为Count组件服务的reducer 
     import countReducer from  "./reducer/count_reducer"
      //引入为Person组件服务的reducer 
     import presonReducer from  "./reducer/person_reducer"
     
     //汇总所有的reducer
     const allReducer = combineReducers({ 
      count:countReducer ,
      person:presonReducer 
     })

**2.redux文件结构**

*  由于多组件数据共享，需要书写多个action和reducer文件，为了方便管理和后期维护，放到哪里也很重要
 *  可以在redux文件夹下分别创建一个acttions和reducers文件夹，在各自的文件夹下去创建组件的action和reducer

## 多组件数据共享完整案例 ##

效果图大致如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]

下面代码只引入组件和redux相关文件代码，App和index.js入口文件就不引入了；

需要添加Person容器组件，person\_action.js和person\_reducer.js文件；

*Count容器组件*

import React from "react";
    import { connect} from 'react-redux'
    
    //UI组件
    class Count extends React.Component{ 
     state = { }
     increment = () => { 
       const { value} = this.selectNumber
       this.props.increment(value*1)
     }
     dencrement= () => { 
       const { value} = this.selectNumber
       this.props.decrement(value*1)
     }
     incrementIfOdd= () => { 
       const { value} = this.selectNumber
       const { count} = this.props
       if(count % 2 !== 0){ 
          this.props.increment(value*1)
       }
     }
     incrementAscyn= () => { 
       const { value} = this.selectNumber
       this.props.incrementAsync(value*1,500)
     }
     render(){ 
       return(
         <div>
           <h1> 我是Count组件，下方组件总人数为：{ this.props.person.length}</h1>
           <h2>当前求和：{ this.props.count}</h2>
           <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.dencrement}>-</button> 
           <button onClick={ this.incrementIfOdd}>当前总数为奇数+</button> 
           <button onClick={ this.incrementAscyn}>异步+</button> 
           <hr/>
            <h2>Person<h2/>
         </div>
       )
     }
    } 
    
    //容器组件
    export default connect(
    state => ({ 
    count:state.count,
    person:state.person
    }),
    {  
     increment:incrementAction, 
     decrement:decrementAction,
     incrementAsync:incrementActionAsync 
    }
    )(Count)

*Person容器组件*

import React from "react";
    import { connect} from 'react-redux'
    
    //UI组件
    class Person extends React.Component{ 
     state = { 
       name:null,
       age:null
     }
     getName = (event) => { 
        this.setState({ name:event.target.value})
     }
     getAge = (event) => { 
        this.setState({ age:event.target.value})
     }
     add = () => { 
       const { name.age} = this.state
       const { person} = this.props
       const id = person.length + 1
       var personObj = { id,name,age}
       this.props.addPerson(personObj)
     }
     render(){ 
       return(
         <div>
           <h1>我是Person组件，上方组件求和为：{ this.props.count}</h1>
           <input onChange={ this.getName} type="text placeholder="输入名字"" name="name"/>
           <input onChange={ this.getAge} type="text placeholder="输入年龄"" name="age"/>
           <button onClick={ this.add}>添加</button>
           <ul>
              { 
                this.state.person.map(item => { 
                  return(
                    <li>{ item.name}--{ item.age}</li>
                  )
                })
              }
           </ul>
         </div>
       )
     }
    } 
    
    //容器组件
    export default connect(
    state => ({ 
    person:state.person,
    count:state.count
    }),
    {  
     addPerson:createPerson
    }
    )(Person)

store.js

/*该文件专门用于暴露一个store对象，整个应用只有一个store对象*/
    
     import { createStore,applyMiddleware,combineReducers} from "redux"
     //引入为Count组件服务的reducer 
     import countReducer from  "./reducer/count_reducer"
      //引入为Person组件服务的reducer 
     import presonReducer from  "./reducer/person_reducer"
     //引入redux-thunk中间件，用于支持异步action
     import thunk from "redux-thunk" 
     
     //汇总所有的reducer
     const allReducer = combineReducers({ 
      count:countReducer ,
      person:presonReducer 
     })
     
     export default createStore(allReducer ,applyMiddleware(thunk))

*constant.js*

/* 该模块用于定义action对象中type类型的常量值, 便于管理和维护的同时，防止程序员单词写错*/
    
    export const INCREMENT = "increment"
    export const DECREMENT = "dencrement"
    export const ADDPERSON = "addPerson"

*count\_action.js*

/* 该文件专门为Coun组件生成的action对象； action的值为对象是同步，为函数是异步*/
    import { INCREMENT,DECREMENT} from './constant'
    import store from './redux/store'
    
    export const incrementAction = data => ({ type:INCREMENT,data})
    
    export const decrementAction = data => ({ type:DECREMENT,data})
    
    export const incrementActionAsync = (data,time) => { 
      return (dispatch) => { 
         setTimeout(() => { 
            dispatch(incrementAction(data))
         },time)
      }
    }

*count\_reducer.js*

/* 该文件用于创建一个为Count组件服务的reducer*/
     
    import { INCREMENT,DECREMENT} from './constant'
    
    const initState = 0 
    export defaulr function countReducer(preState=initState,action){ 
      const { type,data} = action
      switch(type){ 
        case INCREMENT:
          return preState + data
        case DECREMENT:
          return preState - data
        default: 
          return preState      
      }
    }

*person\_action.js*

/* 该文件专门为Person组件生成的action对象；*/
    import { ADDPERSON} from './constant'
    import store from './redux/store'
    
    export const createPerson = personObj => ({ type:ADDPERSON,data:personObj })

*person\_reducer.js*

/* 该文件用于创建一个为Person组件服务的reducer*/
     
     //redux初始化状态 以后组件reducer多了也可以写成对象
    import { ADDPERSON} from './constant'
    
    const initState = [
        { id:1,name:'tom',age:18,},
       ],
    export default function personReducer(preState=initState,action){ 
      const { type,data} = action
      switch(type){ 
        case ADDPERSON:
          return [data,...preState]
        default: 
          return preState      
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/28094a404c0c490e834cd93879e12d83.png