React redux 兄弟组件之间通信

做项目的时候遇到一个场景，兄弟组件A和B，在组件B中的点击事件里面需要操作A组件的state，进行A组件里的tab标签增加和删除。因为用到redux，所以需要把这个state的数据抽出来做状态管理，随手记录一下。

新建action.js文件

export const CHANGE_ADDTABS = 'CHANGE_ADDTABS'; // 增加标签
export const CHANGE_DELETETABS = 'CHANGE_DELETETABS'; // 删除标签// 增加tab标签
export const changeAddTabs = (tab) => ({type: CHANGE_ADDTABS,tab
});// 删除tab标签
export const changeDeleteTab = (tabkey) => ({type: CHANGE_DELETETABS,tabkey      //要删除标签的key值
});

2.store.js文件

import { createStore, combineReducers } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage/session';
import changeTabstate from '../reducer/index';     //这里是相对路径，是从reducer.js中引入const persistConfig = {key: 'root',storage
};// reducer，后面还有别的状态管理也可以放进去
const reducer = combineReducers({changeTabstate ,
});//直接照抄
const persistedReducer = persistReducer(persistConfig, reducer);
export default () => {let store = createStore(persistedReducer, composeWithDevTools());let persistor = persistStore(store);return { store, persistor };
};

3.reducer.js文件

//从action.js中引入两个常量
import { CHANGE_ADDTABS, CHANGE_DELETETABS } from '../../actions/action';  //定义初始数据(A组件的state)，需求是初始页面中默认有3个tab
const initState = {activeTab: '0',     //表示当前处于active状态的tabaddTabs: [{ title: 'tab1', closable: false, key: '0' },{ title: 'tab2', closable: false, key: '1' },{ title: 'tab3', closable: false, key: '2' }]
};// 增加tab（参数1：tab数据，参数2：新增的那条tab数据）
const changeAddTabs = (state, tab) => {let tabList = state.addTabs;tabList.push(tab);//返回新的state（这里注意要使用解构赋值，不然操作之后页面需要刷新才会更新）return {...state,addTabs: [ ...tabList ]};
};// 删除标签（参数1：tab数据，参数2：要删除的tab的key值）
const changeDeleteTabs = (state, tabkey) => {let tabList = state.addTabs;//删除逻辑let newTabList = tabList.filter((pane) => pane.key !== tabkey);//最后还是要返回一个新的statereturn {...state,addTabs: [ ...newTabList ]};
};//最后将增加和删除的操作return出去
export default (state = initState, action) => {switch (action.type) {  //type对应action中定义的typecase CHANGE_ADDTABS:return changeAddTabs(state, action.tab);case CHANGE_DELETETABS:return changeDeleteTabs(state, action.tabkey);default:return state;}
};

4.兄弟组件B

import React from 'react';
//这两个一定要引入
import { connect } from 'react-redux';
import { changeAddTabs, changeActiveKey } from '../../../../redux/action/action';//这里用的react新的hook写法，和以前的class差不多
const BortherB= (props) => {//B组件的点击事件，此时可以操作A组件的stateconst clickAddTAbs = () => {//在props中直接拿到方法调用，这个addTabs方法名就是最后面mapDispatchToProps中定义的名字props.addTabs();    }return (<div>.....</div>);
}
//从reducer中获取初始值，props.tabList就可以直接拿
const mapStateToProps = (state) => ({//changeTabstate和store.js中定义的changeTabstate对应tabList: state.changeTabstate.addTabs,   //addTabs和reducer.js中的初始数据字段addTabs对应  active: state.changeTabstate.activeTab//activeTab和reducer.js中的初始数据字段activeTab对应
});//将增加和删除的方法注入到props中，页面中就可以直接调用
const mapDispatchToProps = {addTabs: changeAddTabs,deleteTabs: changeDeleteTabs
};//最后connect一下
export default connect(mapStateToProps, mapDispatchToProps)(BortherB);

5.兄弟组件A
组件A和组件B的写法一样，下面这些都需要，头部的依赖也要引入，初始数据和方法按需加进来就好
新手入门，如果有不对的，请大家指正，感谢。

React redux 兄弟组件之间通信相关推荐

React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...
VUE 父子组件、兄弟组件之间通信最强详解
目录 1. 父组件调用子组件内参数/方法 1.1 通过 ref 调用/获取子组件内参数/方法 2. 子组件调用父组件内参数/方法 2.1 通过 emit 调用父组件方法 2.2 通过 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
[react] react兄弟组件如何通信？
[react] react兄弟组件如何通信? 状态提升,通过父组件的state和方法传递到两个子组件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
React学习：组件之间的关系、参数传递-学习笔记
文章目录 React学习:组件之间的关系.参数传递-学习笔记父到子传递参数子-父父-孙兄弟组件传参 React学习:组件之间的关系.参数传递-学习笔记父到子传递参数 <!DOCTYPE ...
[react] react非父子组件如何通信？
[react] react非父子组件如何通信? redux context 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...

React redux 兄弟组件之间通信

React redux 兄弟组件之间通信相关推荐

最新文章

热门文章