React項目集成Immutable.js

時間  2019-11-08
標籤 react 項目 集成 immutable.js immutable 欄目 React 简体版
原文   原文鏈接

一、前言

本文章項目的依賴包及其版本以下：css

Package Name Version
antd ^3.16.6
connected-react-router ^6.4.0
customize-cra ^0.2.12
immutable ^4.0.0-rc.12
react ^16.8.6
react-app-rewired ^2.1.1
react-redux ^7.0.3
react-router-config ^5.0.0
react-router-dom ^5.0.0
react-scripts 3.0.1
redux ^4.0.1
redux-logger ^3.0.6
redux-persist ^5.10.0
redux-persist-expire ^1.0.2
redux-persist-transform-immutable ^5.0.0
redux-saga ^1.0.2

二、準備工做，搭建項目

下面是個人項目結構，每一個人或者每一個公司都有本身的目錄架構，這裏個人只供你們參考，另外搭建項目過程和介紹如何使用immutable.js不是本文章的重點，如何使用immutable.js以及本文章相關代碼後面我會給出，若是有疑問歡迎你們在下面留言html

|-- App.js
|-- index.js
|-- serviceWorker.js
|-- assets
|   |-- audio
|   |-- css
|   |   |-- App.scss
|   |   |-- base.scss
|   |   |-- index.css
|   |   |-- override-antd.scss
|   |-- image
|   |   |-- Welcome.png
|   |   |-- awbeci.png
|   |   |-- bgLogo.png
|   |   |-- hiy_logo.png
|   |   |-- indexPop1.png
|   |   |-- indexPop2.png
|   |   |-- logo.png
|   |   |-- logoX.png
|   |   |-- right.png
|   |-- video
|-- components
|   |-- HOC
|   |   |-- loading.js
|   |-- common
|   |-- layout
|       |-- AppRoute.js
|       |-- LayoutPage.js
|       |-- Loading.js
|       |-- MasterPage.js
|       |-- RouterView.js
|       |-- SideMenu.js
|       |-- layoutPage.scss
|       |-- masterPage.scss
|-- config
|   |-- base.conf.js
|-- context
|   |-- themeContext.js
|-- pages
|   |-- DepartmentManage.js
|   |-- Index.js
|   |-- NoFound.js
|   |-- NoPermission.js
|   |-- UserManage.js
|   |-- login
|       |-- Login.js
|       |-- login.scss
|-- redux
|   |-- actions
|   |   |-- authAction.js
|   |   |-- layoutPageAction.js
|   |-- middleware
|   |   |-- authTokenMiddleware.js
|   |-- reducers
|   |   |-- authReducer.js
|   |   |-- index.js
|   |   |-- layoutPageReducer.js
|   |-- sagas
|   |   |-- authSaga.js
|   |   |-- index.js
|   |-- store
|   |   |-- index.js
|   |-- thunks
|-- router
|   |-- index.js
|-- service
|   |-- apis
|   |   |-- 1.0
|   |       |-- index.js
|   |       |-- urls.js
|   |-- mocks
|   |   |-- 1.0
|   |       |-- index.js
|   |       |-- testMock.js
|   |-- request
|       |-- ApiRequest.js
|       |-- MockRequest.js
|-- test
|   |-- App.test.js
|-- utils

三、集成immutable.js

此項目除了依賴包要配置以外，只有redux下的reducer相關文件會設置成immutable.js普通的react組件我沒有設置成immutable.jsreact

App.jsgit

import { ConnectedRouter } from "connected-react-router";
//換成
import { ConnectedRouter } from "connected-react-router/immutable";

store->index.jsgithub

import { routerMiddleware } from "connected-react-router";
//換成
import { routerMiddleware } from "connected-react-router/immutable";
//添加
import immutableTransform from "redux-persist-transform-immutable";

const persistConfig = {
  transforms: [encryptor],
  //換成
  transforms: [
    immutableTransform()
    // 注意：必需要註釋encryptor不然會報錯
    // encryptor
  ],
  ...
}

redux->reducers->index.jsweb

import { connectRouter } from "connected-react-router";
//換成
import { connectRouter } from "connected-react-router/immutable";

redux->reducers->authReducer.jsredux

//添加
import { Map, fromJS, merge } from "immutable";

const initState = {
  user: null,
  token: ""
};

[authTypes.AUTH_SUCCESS]: (state, action) => {
      return Object.assign({}, state, { user: action.data.user, token: action.data.token });
    },
    [authTypes.SIGN_OUT]: (state, action) => {
      return Object.assign({}, state, {
        user: null,
        token: ""
      });
    }
//換成
const initState = fromJS({
  user: null,
  token: ""
});

    [authTypes.AUTH_SUCCESS]: (state, action) => {
      return state.merge({
        user: action.data.user,
        token: action.data.token
      });
    },
    [authTypes.SIGN_OUT]: (state, action) => {
      return state.merge({
        user: null,
        token: ""
      });
    }

redux->reducers->layoutPageReducer.jssegmentfault

//添加
import { Map, fromJS, merge, List } from "immutable";

const initState = {
  index: "126",
  subIndex: "",
  collapsed: false,
  menus: [],
  loading: false
};
[layoutPageTypes.SAVE_MENU_INDEX]: (state, action) => {
      const { keyPath } = action.payload;
      let index = keyPath[0];
      let subIndex = null;
      if (keyPath.length === 2) {
        subIndex = keyPath[1];
      }
      return Object.assign({}, state, {
        index: index,
        subIndex: subIndex
      });
    },
    [layoutPageTypes.SAVE_MENU_COLLAPSED]: (state, action) => {
      const { collapsed } = action.payload;
      return Object.assign({}, state, {
        collapsed: collapsed
      });
    },
    [layoutPageTypes.GET_MENUS]: (state, action) => {
      const { menus } = action;
      return Object.assign({}, state, {
        menus: menus
      });
    }
//換成
const initState = fromJS({
  index: "126",
  subIndex: "",
  collapsed: false,
  menus: List()
});

[layoutPageTypes.SAVE_MENU_INDEX]: (state, action) => {
      const { keyPath } = action.payload;
      let index = keyPath[0];
      let subIndex = null;
      if (keyPath.length === 2) {
        subIndex = keyPath[1];
      }
      return state.merge({
        index: index,
        subIndex: subIndex
      });
    },
    [layoutPageTypes.SAVE_MENU_COLLAPSED]: (state, action) => {
      const { collapsed } = action.payload;
      return state.merge({
        collapsed: collapsed
      });
    },
    [layoutPageTypes.GET_MENUS]: (state, action) => {
      const { menus } = action;
      return state.merge({
        menus: menus
      });
    }

middleware->authTokenMiddleware.jsapi

//添加
import { fromJS } from "immutable";

if (action.type === REHYDRATE) {
    if (action.payload && action.payload.authReducer && action.payload.authReducer.token) {
      ApiRequest.setToken(action.payload.authReducer.token);
    }
  }
//換成
if (action.type === REHYDRATE) {
    if (typeof action.payload !== "undefined") {
      let authReducer = action.payload.authReducer;
      if (authReducer) {
        const token = authReducer.get("token");
        ApiRequest.setToken(token ? token : null);
      }
    }
  }

components->layout->LayoutPage.js緩存

<span style={{ marginLeft: 8 }}>{authReducer.user ? authReducer.user.name : "用戶"}</span>

<Switch>{authReducer.token ? renderRoutes(routes) : <Redirect to="/login" />}</Switch>
//換成
<span style={{ marginLeft: 8 }}>{authReducer.get("user") ? authReducer.getIn(["user", "name"]) : "用戶"}</span>

<Switch>{authReducer.get("token") ? renderRoutes(routes) : <Redirect to="/login" />}</Switch>

components->layout->SideMenu.js

let menus = layoutPageReducer.menus;

<Menu
          theme="light"
          defaultSelectedKeys={[layoutPageReducer.index]}
          selectedKeys={[layoutPageReducer.index]}
          defaultOpenKeys={[layoutPageReducer.subIndex]}
          mode="inline"
          className="sider-menu-container"
          inlineCollapsed={layoutPageReducer.collapsed}
          onClick={this.clickSidebarMenu}
        >
          {newMenus}
        </Menu>
//換成
let menus = layoutPageReducer.get("menus");

        <Menu
          theme="light"
          defaultSelectedKeys={[layoutPageReducer.get("index")]}
          selectedKeys={[layoutPageReducer.get("index")]}
          defaultOpenKeys={[layoutPageReducer.get("subIndex")]}
          mode="inline"
          className="sider-menu-container"
          inlineCollapsed={layoutPageReducer.get("collapsed")}
          onClick={this.clickSidebarMenu}
        >
          {newMenus}
        </Menu>

components->layout->AppRoute.js

Authentication() {
    return this.props.store.authReducer.token ? <Redirect to="/" /> : <Login />;
  }
//換成
    return this.props.store.authReducer.get("token") ? <Redirect to="/" /> : <Login />;

四、啓動項目看是否集成成功

命令行運行：yarn start

clipboard.png

清除下緩存尤爲是localstorage，若是看到上面的登陸頁面那麼恭喜你配置成功！

五、redux-logger 打印immutable.js日誌

下面咱們來看看redux-logger打印的日誌跟咱們不使用immutable.js有什麼區別？
clipboard.png
如上圖所示，打印的日誌數據就是immutable.js的相關數據，可是咱們會發現閱讀性不是太好，這裏咱們安裝一個格式化immutable.js的日誌數據的Chrome插件，安裝一下便可，以前我有寫過一篇文章教你怎麼使用這個插件，點擊跳轉閱讀，安裝好以後，咱們再來查看數據，以下所示：

clipboard.png

是否是增長了日誌的可閱讀性，到此咱們集成Immutable.js就至此結束，歡迎你們在下面留言交流！

六、總結

1）上面是教你如何把現有項目集成immutable.js，若是你是新項目，上面有些配置實際上是不用管的；
2）上面的集成原則：把原生的寫法改爲immutable.js的寫法便可！；
3）這裏我用到了redux-persist，若是你沒有用到這個包，那麼你就能夠不用安裝redux-persist-transform-immutable，換成redux-immutable包便可，具體如何操做，官方文檔上面有講，這裏就很少說了。
4）演示地址、本文章代碼，另外本文章代碼對應github上面的immutable.js分支，而演示地址對應的是master分支！

七、引用

1.Immutable.js瞭解一下？
2.React引用數據類型與immutable.js的使用實例
3.react 使用的小建議
4.Immutable.js 以及在 react+redux 項目中的實踐
5.React Native Redux、redux-persist、immutable.js 結合實踐
6.Error when using redux-persist with redux-immutable
7.大話immutable.js
8.Immutable.js 以及在 react+redux 項目中的實踐
9.Immutable.js與React,Redux及reselect的實踐
10.如何用React+Redux+ImmutableJS進行SPA開發
11.immutable.js 在React、Redux中的實踐以及經常使用API簡介
12.筆記, immutable-js 基礎操做
13.Immutable.js 到底值不值得用？
14.Immutable 詳解及 React 中實踐
15.Immutable.js與React,Redux及reselect的實踐

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程