React项目集成Immutable.js
栏目: JavaScript · 发布时间: 5年前
内容简介:本文章项目的依赖包及其版本如下:下面是我的项目结构,每个人或者每个公司都有自己的目录架构,这里我的只供大家参考,另外搭建项目过程和介绍如何使用immutable.js不是本文章的重点,如何使用immutable.js以及本文章相关代码后面我会给出,如果有疑问欢迎大家在下面留言此项目除了依赖包要配置之外,只有redux下的reducer相关文件会设置成immutable.js普通的react组件我没有设置成immutable.js
1、前言
本文章项目的依赖包及其版本如下:
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 |
2、准备工作,搭建项目
下面是我的项目结构,每个人或者每个公司都有自己的目录架构,这里我的只供大家参考,另外搭建项目过程和介绍如何使用immutable.js不是本文章的重点,如何使用immutable.js以及本文章相关代码后面我会给出,如果有疑问欢迎大家在下面留言
|-- 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
3、集成immutable.js
此项目除了依赖包要配置之外,只有redux下的reducer相关文件会设置成immutable.js普通的react组件我没有设置成immutable.js
App.js
import { ConnectedRouter } from "connected-react-router"; //换成 import { ConnectedRouter } from "connected-react-router/immutable";
store->index.js
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.js
import { connectRouter } from "connected-react-router"; //换成 import { connectRouter } from "connected-react-router/immutable";
redux->reducers->authReducer.js
//添加 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.js
//添加 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.js
//添加 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 />;
4、启动项目看是否集成成功
命令行运行: yarn start
清除下缓存尤其是localstorage,如果看到上面的登录页面那么恭喜你配置成功!
5、redux-logger 打印immutable.js日志
下面我们来看看redux-logger打印的日志跟我们不使用immutable.js有什么区别?
如上图所示,打印的日志数据就是immutable.js的相关数据,但是我们会发现阅读性不是太好,这里我们安装一个格式化immutable.js的日志数据的Chrome插件,安装一下即可,之前我有写过一篇文章教你怎么使用这个插件,点击跳转阅读,安装好之后,我们再来查看数据,如下所示:
是不是增加了日志的可阅读性,到此我们集成Immutable.js就至此结束,欢迎大家在下面留言交流!
5、总结
1)上面是教你如何把现有项目集成immutable.js,如果你是新项目,上面有些配置其实是不用管的;
2)上面的集成原则:把原生的写法改成immutable.js的写法即可!;
3)这里我用到了redux-persist,如果你没有用到这个包,那么你就可以不用安装redux-persist-transform-immutable,换成redux-immutable包即可,具体如何操作,官方文档上面有讲,这里就不多说了。
4) 演示地址 、 本文章代码 ,另外本文章代码对应github上面的immutable.js分支,而演示地址对应的是master分支!
6、引用
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
8. Immutable.js 以及在 react+redux 项目中的实践
9. Immutable.js与React,Redux及reselect的实践
10. 如何用React+Redux+ImmutableJS进行SPA开发
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- SpringBoot项目集成日志
- 持续集成你的PHP项目
- 持续集成你的PHP项目
- 为现有 iOS项目集成 Flutter
- express项目集成mocha测试框架
- Practice - iOS 项目持续集成实践(一)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
从Python开始学编程
Vamei / 电子工业出版社 / 2016-11-24 / CNY 49.00
改编自Vamei博客的《Python快速教程》。本书以Python为样本,不仅介绍了编程的基本概念,还着重讲解编程语言的主流范式:面向过程、面向对象、面向函数。读者不仅可以轻松学会Python,以后再学习其他编程语言时也会更加容易。一起来看看 《从Python开始学编程》 这本书的介绍吧!