当前位置: 首页 > Web前端 > JavaScript

Redux与前端table打出“组合拳”,实现大屏显示应用的交互增强

时间:2023-03-26 21:49:34 JavaScript

Redux是一个提供可预测状态管理的JavaScript状态容器。可以在react、angular、vue等项目中使用,但是配合react使用更方便。Redux的示意图如下。可以看到store仓库是Redux的核心,通过维护一个store仓库来管理状态。状态是只读的,改变状态的唯一方法是当组件触发一个动作时。通过编写Reducers函数,它会接收之前的状态和动作,并返回新的状态。Redux的核心概念就是如何根据这些动作对象来更新状态。强制使用动作来描述所有变化的好处是你可以清楚地知道应用程序中发生了什么。如果某事发生了变化,您可以说出它为什么会发生变化,而行动是描述发生了什么的指标。下面我们来看一下Redux在大屏展示中的具体使用场景:下图是产品开发中非常常见的大屏展示界面示例。核心数据源是一组销售数据。上层三个仪表盘和下层表格组件共享同一个数据源,实现了各个维度的详细数据展示和数据统计。从图片上看,它似乎已经具备大屏幕显示的数据显示和统计功能,但显示的数据无法编辑修改。这时候你可能会收到来自客户的灵魂拷问:“展示功能不错,但是表格数据可以实时编辑更新吗?”图中的销售明细数据直接显示在一个html表格中。如果要实现编辑功能,通常的做法是我们挑一个前端表格组件来实现编辑功能。文章代码文件可在文末下载。将表格添加到您的React应用程序我们将用电子表格替换html表格,修改组件文件夹中的SalesTable.js,并替换其中的表格。handleValueChanged(e,info)}>其中SpreadSheets元素创建电子表格并定义如何显示它的数据列dataSource属性定义了绑定的数据源,Column中的dataField属性告诉该列应该绑定到底层数据集的哪个属性。接下来是js代码部分,import'@grapecity/spread-sheets-react';import"@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";import{SpreadSheets,Worksheet,Column}from'@grapecity/spread-sheets-react';exportconstSalesTable=({tableData,valueChangedCallback,})=>{constconfig={sheetName:'SalesData',hostClass:'spreadsheet',autoGenerateColumns:false,width:200,visible:true,resizable:true,priceFormatter:'$#.00',chartKey:1}functionhandleValueChanged(e,obj){valueChangedCallback(obj.sheet.getDataSource());}handleValueChanged.bind(this);const[_spread,setSpread]=useState({});functionworkbookInit(spread){setSpread(spread)}}可以用很少的代码完成。配置中的几个数据属性。是绑定到电子表格中组件的配置选项。workbookInit方法是在初始化工作表时调用的回调。handleValueChanged是表格数据发生变化后重新运行的回调,可以显示电子表格数据:现在我们用完整的电子表格替换原来的html表格,此时可以修改和编辑表格中的数据,但是之后编辑,以上销量统计不会实时更新。接下来我们将使用Redux创建一个store仓库来存储销售数据,实现数据共享和实时更新。将Redux添加到您的React应用程序1.引入相关库"@reduxjs/toolkit":"^1.9.1","react-redux":"^7.2.0","redux":"^4.0.5"2.通过createSlice创建切片新建一个js文件,编写如下代码,通过Redux提供createSlice方法。我们创建一个切片,初始化状态,并将销售明细数据添加到它作为recentSales。为reducers增加了两个方法updatesales和importSales,用于更新或导入销售明细数据时同步recentSales。import{createSlice}from'@reduxjs/toolkit';import{recentSalesdata}from"../data/data";constinitialState={recentSales:JSON.parse(JSON.stringify(recentSalesdata)),status:'idle',};exportconstsalesSlice=createSlice({name:'recentSales',initialState,reducers:{importSales:(state,action)=>{state.recentSales=JSON.parse(JSON.stringify(action.payload));},updatesales:(state,action)=>{letsales=state.recentSales;letarr=sales.map(function(o){returno.id});console.log(arr);action.payload.forEach((newsale)=>{if(arr.indexOf(newsale.id)>=0){state.recentSales[arr.indexOf(newsale.id)]=JSON.parse(JSON.stringify(newsale));}else{控制台.log("添加");state.recentSales.push(JSON.parse(JSON.stringify(newsale)));}});},},});exportconst{updatesales,importSales}=salesSlice.actions;exportconstrecentSales=(state)=>state.recentSales.recentSales;exportdefaultsalesSlice.减速器;3、创建store,添加store.js文件并添加如下代码,这里创建的store添加了刚才创建的slicerimport{configureStore}from'@reduxjs/toolkit';从'../store/salesSlice'导入recentSalesReducer;exportconststore=configureStore({reducer:{recentSales:recentSalesReducer,},});4.在component组件中使用store在Dashboard.js中,导入如下代码。从'react-redux'导入{useSelector,useDispatch};从'../store/salesSlice'导入{updatesales,importSales,recentSales};然后在创建的Dashboard方法体中添加如下代码,其中react-redux提供的:useSelector用于获取刚刚创建的state中的recentSales。useDispatch用于调用reducer中已经创建的方法来更新recentSales。constsales=useSelector(recentSales);constdispatch=useDispatch();函数handleValueChanged(tableData){dispatch(updatesales(tableData));}函数handleFileImported(newSales){dispatch(importSales(newSales));添加redux并进行上述修改后,实现了销售数据编辑后同步更新数据统计结果的效果:动画中可以看到上面三个dashboard显示的内容也同步更新。原因是在编辑表后,我们同步更新了state中的recentSales。好了,现在我们有了一个增强的仪表板,可以随着数据的变化实时更新。客户的需求已经顺利完成,但是在演示过程中,你很可能会听到客户提出以下需求:“你们能支持Excel数据的导入导出吗?”如果你长期从事软件开发,你可能不止一次从终端客户或产品经理口中听到过这种灵魂拷问。对于非技术人员来说,要求Excel导入/导出/显示是一个很正常也很容易实现的需求。但实际上,这个问题往往让前端开发者感到束手无策。使用Excel文件是一项繁重的工作。即使使用第三方的网格组件,也很难支持将复杂的Excel表格作为数据导入。这个问题可以通过表来简化,import和import都可以直接实现。这就是我们开始使用电子表格作为表格详细信息显示和编辑控件的原因。下面我们在应用程序中添加Excel导入导出功能,导出为Excel文件。很容易为工作表添加Excel导入导出功能。首先在界面上添加相关的文件输入框和按钮。将它放在电子表格面板的底部,在结束SpreadSheets标记之后。{/*导出到EXCEL*/}导出到Excel{/*从EXCEL导入*/}

导入Excel文件:
fileChange(e)}/>
接下来添加点击时触发的exportSheet方法,首先添加导入如下包,其中@grapecity/spread-excelio是SpreadJS中用于导入导出Excel的包。从“@grapecity/spread-excelio”导入{IO};从“文件保护程序”导入{saveAs};然后在组件中添加导出方法exportSheet:functionexportSheet(){constspread=_spread;constfileName="销售数据.xlsx";constsheet=spread.getSheet(0);constexcelIO=newIO();constjson=JSON.stringify(spread.toJSON({includeBindingSource:true,columnHeadersAsFrozenRows:true,}));excelIO.save(json,(blob)=>{saveAs(blob,fileName);},function(e){alert(e);});}运行测试,点击按钮,直接得到导出的Excel文件。请注意,我们设置了两个序列化选项:includeBindingSource和columnHeadersAsFrozenRows。为保证工作表绑定的数据正确导出,工作表包含列标题,Excel数据导入,我们继续添加导入方法,刚刚创建了文件输入框,我们来处理它的onChange事件,创建一个fileChange方法函数fileChange(e){if(_spread){constfileDom=e.target||e.src元素;constexcelIO=newIO();constspread=_spread;constdeserializationOptions={frozenRowsAsColumnHeaders:true};excelIO.open(fileDom.files[0],(data)=>{constnewSalesData=extractSheetData(data);spread.getSheet(0).setDataSource(newSalesData,false);fileImportedCallback(newSalesData);});}}选择文件后,使用ExcelIO导入。获取里面的json数据。传入自定义函数extractSheetData,从中提取需要的数据,然后设置为SpreadJS作为电子表格的数据源,传给fileImportedCallback方法,调用dispatch(importSales(newSales));同步更新状态recentSales。extractSheetData函数可以在src/util.util.js文件中找到,用于解析Excel中的数据。extractSheetData函数假定导入工作表中的数据与原始数据集具有相同的列。如果有人上传不符合此要求的电子表格,则不会对其进行解析。对于大多数客户来说,这应该是可以接受的限制。当数据不匹配时,也可以尝试给客户提示信息。Excel导入导出效果最终的工程可以参考下面的附件https://gcdn.grapecity.com.cn...React、Redux和电子表格的结合使得这个应用的增强开发非常方便。借助Redux提供的可预测状态管理和交互式电子表格,可以在很短的时间内创建复杂的企业JavaScript应用程序。延伸阅读React+Springboot+Quartz,从0实现Excel报表自动化电子表格也能当购物车吗?使用纯前端Excel表格控件SpreadJS简单三步即可构建企业现金流量表