集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web前端培训哪家好?Rematch制作简易数字计数器

发布者: 成都达内     浏览次数:     发布时间:2020-07-01 11:40:18

Redux是一个出色的状态管理工具,并且有着健全的中间件生态以及出色的开发工具;Rematch是没有boilerplate的Redux最佳实践。移除了声明action类型、action创建函数、thunks、store配置、mapDispat...

  摘要

  近期在优化团队代码,发现Redux重复使用的代码过多。 经过调研发现了Rematch库:Redux是一个出色的状态管理工具,并且有着健全的中间件生态以及出色的开发工具;Rematch是没有boilerplate的Redux最佳实践。移除了声明action类型、action创建函数、thunks、store配置、mapDispatchToProps、sagas等东西,大大简化了代码。故今天就来分享rematch的用法。

  成都web前端培训哪家好?Rematch制作简易数字计数器

  Rematch的用法

  1.初始化全局设置store

  Init(config):初始化Rematch,在init中可以配置属于自己的使用的config参数。

  Models:导出和存储项目的状态管理,models详细的参数说明可以到官网查看文档进行阅读。

  Plugins:用来自定义init配置或背部hooks,可以添加功能来设置Rematch,更多的插件可以阅读官网插件的API进行学习。

  Redux:可以对redux设置访问以及覆盖redux方法的选项,可以保留redux中优秀的方法等。

  import { init } from '@rematch/core';

  import thunk from 'redux-thunk';

  import immerPlugin from '@rematch/immer';

  import selectPlugin from '@rematch/select';

  import createLoadingPlugin from '@rematch/loading';

  import { createLogger } from 'redux-logger';

  import * as models from './models';

  const middlewares = [thunk];

  if (process.env.NODE_ENV === 'development') {

  middlewares.push(createLogger())

  }

  export const createStore = initialState => init({

  models: {

  ...models

  },

  plugins: [immerPlugin(), createLoadingPlugin(), selectPlugin()],

  redux: {

  initialState: initialState,

  middlewares: middlewares,

  devtoolOptions: {

  disabled: process.env.NODE_ENV === 'production',

  },

  }

  })

  const store = createStore();

  export default store;

  2.将初始化store引入index.js文件

  Rematch是Redux的最佳实践,所以store的注入方式保持redux原有的注入方式。

  import React from 'react';

  import ReactDOM from 'react-dom';

  import { Provider } from "react-redux";

  import App from './App';

  import store from './store';

  import './index.css';

  ReactDOM.render(

  ,

  document.getElementById('root')

  );

  3.建立models状态管理文件

  创建models文件夹,导出所有的model模块。

  import count from './count';

  import lessons from './lessons';

  export {

  count,

  lessons

  };

  创建数字计数器状态管理count.js

  const initState = {

  number: 0

  };

  const count = {

  state: initState,

  reducers: {

  increase(state, payload) {

  const { number } = state;

  state.number = number + payload;

  return state;

  },

  decrease(state, payload) {

  const { number } = state;

  state.number = number - payload;

  return state;

  }

  },

  effects: dispatch => ({})

  }

  export default count;

  4.state应用到相对应的组件

  Rematch只是优化了Redux中重复的代码段,所以状态的使用以及更新状态的方法还是沿用redux的方式。

  import React from 'react';

  import { connect } from 'react-redux';

  const Count = ({

  number,

  increase,

  decrease

  }) => {

  return (

  数字计数器

  {number}

  increase(1)}>点击加1

  decrease(1)}>点击减1

  )

  }

  const mapStateToProps = state => ({

  number: state.count.number

  })

  const mapDispatchToProps = dispatch => ({

  increase: dispatch.count.increase,

  decrease: dispatch.count.decrease

  })

  export default connect(mapStateToProps, mapDispatchToProps)(Count);

  测试结果

  成都web前端培训哪家好?Rematch制作简易数字计数器

  总结

  Rematch是Redux实践的最佳方式,极大的简化了项目中的代码量。虽然Rematch极大的优化了项目的代码数量问题,也更简洁明了的区分了不同组件的不同状态管理文件,但是Rematch依旧存在着一些不可避免的小问题,比如state持久化等。这次分享只是简单的展示了Rematch的用法,后续会持续更新更复杂、更多样性的状态数据处理案例。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56