上一篇文章记录了一个容器组件的使用 ,但在一个项目开发中,肯定不止一个容器组件 所以在这里更新一个多个容器组件的数据共享的版本
实现起来比较简单 只是在上一篇文章的基础上 合并多个容器组件就可以了
有两个容器组件 一个为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逻辑比较复杂,相互之间的依赖也比较多,所以需要反复记忆和练习才能掌握