react-redux多容器数据共享版

上一篇文章记录了一个容器组件的使用 ，但在一个项目开发中，肯定不止一个容器组件 所以在这里更新一个多个容器组件的数据共享的版本

实现起来比较简单 只是在上一篇文章的基础上 合并多个容器组件就可以了

有两个容器组件 一个为name容器组件  一个为 count容器组件

两个容器组件之间互相用了对方的数据

当我修改的时候  两个组件的内容都会发生改变

 

 

下面我们来实现一下这个功能

目录结构与之前的一样

actions.js  把所有的请求任务的内容都写在这里

export const add = data => {
    return {
        type:'add',
        data
    }
}


export const asyncAdd = (data,time) => {
    return dispatch => {
        console.log('在actions里输出的dispatch',dispatch) 
 //通过这个dispatch来执行函数的
        setTimeout(() => {
            dispatch(add(data))
        }, time);
    }
}


export const changeName = data => {
    return {
        type:'changeName',
        data
    }
}


export const asyncChangeName = (data,time) => {
    return dispatch => {
        setTimeout(() => {
            dispatch(changeName(data))
        }, time);
    }
}

 reducers的内容，把所有的函数内容都放置在这里面

reducers -> name.js

const initName = '天津'
export default function changeName(preState = initName,actions){
    const{type,data} = actions
    if(type === 'changeName'){
        return data
    }else {
        return preState
    }
}

reducers -> coiunt.js

const initValue = 10

export default function Count (preState = initValue,actions){
    const {data,type} = actions

    if(type === 'add'){
        // this.props中的count是这里的返回值
        return preState + data
    }
    else {
        // 这个就是 初始值的 count
        return initValue
    }
}

store.js

合并时候的操作 在store.js中引入  combineReducers

// 要引入4个东东

//  createStore   applyMiddleware
//  异步的
// 调试工具
// 函数

import {createStore,applyMiddleware,combineReducers} from 'redux'
import thunk from 'redux-thunk'
import Count from './redurces/Count'
// import NameReducer from './redurces/changeName'
import Name from './redurces/changeName'
import {composeWithDevTools} from 'redux-devtools-extension'
    const allReducer = combineReducers([
        Count,
        Name
    ])

export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

再到container下，这个文件夹就

container -> containerCount   (Count的容器组件内容)  是来存放容器组件的 ，也有其他人习惯用pages来命名

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {add,asyncAdd} from '../store/actions/actions'

class containerCount extends Component {

 

    add = data => {
        this.props.add(data)
    }

    asyncAdd = (data,time) => {
        this.props.asyncAdd(data,time)
        // store.dispatch(asyncAdd(data,time))
    }
    render() {
    
        console.log(this.props,'props')
       // this.props里有add asyncAdd函数  还有 count
        return (
            <div>
                <p>{this.props.count}</p>
                <p>{this.props.name}</p>
                <p onClick={() => this.add(8)}>jia</p>
                <p onClick={() => this.asyncAdd(3,2000)}>jiaAsync</p>
            </div>
        )
    }
}

const mapStateToProps = state => {
    // 这个state 就是 10
    console.log(state,'29')
    return {
        // 这里给起了一个名字就叫做count 就是那个初始值 10
//这里是一个类数组  要通过下标来拿到它的内容
        count:state[0],
        name:state[1]
    }
}
let o = {
    'add':add,
    'asyncAdd':asyncAdd
}


export default connect(mapStateToProps,o)(containerCount)

container -> name (Name容器组件)

import {connect} from 'react-redux'
import { changeName,asyncChangeName } from '../store/actions/actions'
import React, { Component } from 'react'

class containerName extends Component {

    changeName = data => {
        this.props.changeName(data)
    }

    asyncChangeName = (data,time) => {
        this.props.asyncChangeName(data,time)
    }


    render() {
        return (
            <div>
                <h1>{this.props.name}</h1>
                <p>{this.props.count}</p>
                <p onClick={() => this.asyncChangeName('王姑',1000)}>asyncChangeName</p>
                <p onClick={() => this.changeName('影久')}>changeName</p>
            </div>
        )
    }
}


const mapStateToProps = state => {
    // console.log(state,'18')
    return {
        name:state[1],
        count:state[0]
    }
}

let o = {
    'changeName':changeName,
    'asyncChangeName':asyncChangeName
}

export default connect(mapStateToProps,o)(containerName)

再到App.js中去 引入

import React, { Component } from 'react'
import ContainerCount from './container/containerCount'
import ContainerName from './container/containerName'

export default class App extends Component {
  render() {
    return (
      <div>
         <ContainerName/>
         <hr/>
        <ContainerCount/>
       
      </div>
    )
  }
}

再到index.js中去配置 store传递数值

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
// 这里的store是一个合并了多个容器组件的对象
import Store from './store/store'
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    <Provider store={Store}>
    <App  />
    </Provider>
   
  </BrowserRouter>,
  document.getElementById('root')
);

！！！因为react-redux逻辑比较复杂，相互之间的依赖也比较多，所以需要反复记忆和练习才能掌握