React +Redux+ Ant Design + echarts 项目实践

Posted 2020-08-30 淡烘糕

项目框架

采用React.js作为项目的框架

采用redux作为数据管理的框架

采用antd作为项目的UI组件

采用echarts完成项目中折线图的绘制

个人项目工作流程总结

拿到UI高保真图片之后先对整个页面进行模块化分，大的模块分为上部的折现图部分，中间部分的网元的拓扑图部分，下部分表格部分以及表格点击后的弹出层部分。每个模块有可以再次细分为模块的头部（头部数据基本不变化），以及模块的内容展示部分。

基本就这样把整个页面细分成不同的组件模块，子组件又可以组成父组件，大的父组件完整组合成整个页面。

1. 起初做的时候并没有采用redux来控制数据的传输，因为当时自己以前并没有用过（当时听说很复杂），并且通过react提供的数据传递的方式也用不到redux，并且开始做的时候组件之间数据传递都还比较简单。直接采用Ajax请求通过在当前页面请求到数据，在通过this.props来来传递数据，通过this.state来控制组件内数据的变化，通过回调函数来完成数据从子组件传递到父组件。后面在项目进展过程中项目组中的其他前端都采用了redux来实现数据的传递，然后就开始改在自己的代码。天知道在一个基本昨晚的页面中采用一个自己从来没有过的技术并且要摒弃前面写的代码的思维惯性会有多困难。于是当时就陷入了无尽的痛苦之中。不性的是关于redux的教学视频网上也没找到。看了很多博客文章也是云里雾里。实在没办法了，通过看项目组成员写的其他页面的，改造自己的页面。终于把redux的数据跑通了。（过程纯属自我吐槽）
2. echarts相对来说就比较容易接受了（虽然以前也没用过），首先其是百度的开源产品，有中文的官网和完整的API配置文档。并且其针对不同的图形配置不同的option也来得简单粗暴。所以很快也就能够用来做项目中的折线图。
3. antdUI组件是以前用来作过一个小的项目的东西，也算比较熟悉。以前用的是1.X的版本，进行这个项目的时候已经进入了2.X的版本，并且在持续的更新。功能也越来越强大。

项目流程介绍

由于这个项目是一个运营商后台数据可视化平台，所以整体页面风格也是简单实用型。首先在antd中找到每一个页面中需要的组件，复制出代码，呈现在页面上，然后再根据高保真的组件尺寸进行样式改造。在react的每一个生命周期中完成相应的事件处理。

本次总结的重点：使用redux完成的那个组件之间的数据通讯

1. 首先引入react-redux：

   import {Provider} from "react-redux";

    

2. 引入configureStore组件，里边存储着所有action中的状态：

   import configureStore from "./store/configureStore.js";
   
   const store=configureStore();

    

3. 用redux中解析出来的Provider包裹住主组件：

 

ReactDOM.render(
    <Provider store={store}><RootApp/></Provider>,
    document.getElementById("root")
)

redux主要由三个部分组成，这个在很多的介绍redux的博客中都会讲到，这里我也想复习一下，先按照自己的理解写下来：这三部分分别是store（储备），顾名思义就是用来存储数据的仓库，在用redux进行数据传递的时候，需要传递的数据都会存储在store中。第二部分是reducers（还原剂，减速剂），在这部分中对数据进行一些操作，然后然后把数据再返回store中，然后通过store中的数据变化来更新组件。第三部分就是action，用来接收组件中事件，生成操作数据的方法。把action中的方法和store中的数据一起传入reducer中进行处理。

(由于自己理解的不是很透彻，现将一些知名博客中的解释进行引用)

首先，用户发出 Action。
store.dispatch(action);
然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

 

具体介绍Redux中的每一块的写法

//configureStore

/**
 * 接收reducer里的state,存储所有state
 */
import {
    createStore, applyMiddleware,
    combineReducers, compose
} from "redux";
import thunkMiddleware from ‘redux-thunk‘;
import createLogger from ‘redux-logger‘;
import {
    /**
     * 从reducer中引入的处理后保存store数据的方法
     */
    } from "../reducers/reducer.js";
/**
 * @description:将多个拆分的reducer（一个reducer管理一个状态）合并成一个新的reducer传入store。
 */
const newReducer = combineReducers({
    /**
     * 从reducer中引入的处理后保存store数据的方法
     */
});
const logger = createLogger();
const initialState = {};
export default function configureStore() {
    let store;
    if (module.hot) {
        store = createStore(newReducer, initialState, compose(
            applyMiddleware(thunkMiddleware, logger),
            window.devToolsExtension ? window.devToolsExtension() : f => f
        ));
    } else {
        store = createStore(newReducer, initialState, compose(
            applyMiddleware(thunkMiddleware), f => f
        ));
    }
    return store;
}

 

//reducers

/**
 *  Reducer
 */

import {
    /**
     * 引入action中的状态常量
     */
    GET_SUCCESS
} from "../actions/action.js";

/**
 * @func:(getValueDate)获取数据值;
 */

export function getValueDate(state={},action){
    switch (action.type){
        case GET_SUCCESS:
            return {
                data:Object.assign({},state,updateState(state,action)).data
            }
        default:
            return state
    }
}

 

//actions

/**
 * action
 */

import Apis from "../utils/api.js";//Apis为数据请求的后台接口地址
import { callApi } from ‘../../utils/utils.js‘;//callApi为封装的利用Ferch请求方法
import {
    GET_VALUE,
    GET_SUCCESS,
    GET_FAILURE
} from "./action.js";

function getValueRequest(type) {
    return{
        type:type
    }
}

function getValueRequestSuccess(type){
    return function(data){
        return{
            type:type,
            data:data
        }
    }
}
function getValueRequestFailure(type){
    return function(data){
        return{
            type:type
        }
    }
}

/***
 * @func:提交请求的函数;
 */
export function getSelectValue(parm){
    let url=Apis.GET_SELECT_VALUE_URL;
    return callApi(
        url,
        parm,
        getValueRequest(GET_VALUE),
        getValueRequestSuccess(GET_SUCCESS),
        getValueRequestFailure(GET_FAILURE)
    );
}

 

 

//部分内容未完成，后续补充。