瀏覽器中安裝redux devtools擴充套件

yarn add redux  react-redux redux-devtools-extension

安裝依賴包即可

// 引入createStore建立store，引入applyMiddleware 來使用中介軟體
// eslint-disable-next-line
import { createStore,applyMiddleware } from 'redux';
// 引入所有的reducer
import reducer from './../reducer';
// 安裝redux-devtools-extension的視覺化工具。
// eslint-disable-next-line
import { composeWithDevTools } from 'redux-devtools-extension'
const initialState = {
    menuName: ''
}
const configureStore = () => createStore(reducer, initialState);

export default configureStore;
 

import { Provider } from 'react-redux'
import configureStore from './redux/store/configureStore';
import * as serviceWorker from './serviceWorker';
// Redux Store物件，管理所有的Redux狀態
const store = configureStore();
ReactDOM.render(<Provider store={store}>
  <IRouter />
</Provider>, document.getElementById('root'));
 

yarn add react-draft-wysiwyg draftjs-to-html --save  react的富文字外掛

yarn add echarts echarts-for-react --save
yarn add n來管理node版本，可能大於9版本的node與echarts搭配會出錯

安裝echarts基礎庫及reacts-for-react依賴包

按需載入echatrs元件

import React from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react';
import echartTheme from '../echartTheme'
// import echarts from 'echarts'
// 引入 ECharts 主模組,實現按需載入
import echarts from 'echarts/lib/echarts'
// 引入餅圖和折線圖
import 'echarts/lib/chart/bar'
// 引入提示框和標題元件