文档章节

Rematch的深入学习与实战应用(一),简易数字计数器

o
 osc_ocl8o73l
发布于 07/01 09:26
字数 778
阅读 27
收藏 0

精选30+云产品,助力企业轻松上云!>>>

摘要

   近期在优化团队代码,发现Redux重复使用的代码过多。 经过调研发现了Rematch库:Redux是一个出色的状态管理工具,并且有着健全的中间件生态以及出色的开发工具;Rematch是没有boilerplate的Redux最佳实践。移除了声明action类型、action创建函数、thunks、store配置、mapDispatchToProps、sagas等东西,大大简化了代码。故今天就来分享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(
  <Provider store={store}>
    <App />
  </Provider>,
  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 (
    <div className="count-container">
      <h1>数字计数器</h1>
      <div>{number}</div>
      <div>
        <button className="increase-btn" onClick={() => increase(1)}>点击加1</button>
        <button className="decrease-btn" onClick={() => decrease(1)}>点击减1</button>
      </div>
    </div>
  )
}

const mapStateToProps = state => ({
  number: state.count.number
})

const mapDispatchToProps = dispatch => ({
  increase: dispatch.count.increase,
  decrease: dispatch.count.decrease
})

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

 

测试结果

 

 

总结

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

 

版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明。

o
粉丝 0
博文 58
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SequoiaDB监控与开发实践分析

使用背景 公司近期上线了一个新应用,底层数据库采用了国产的分布式数据库 – SequoiaDB。 因为需要将 SequoiaDB 集群纳入到公司的整个监控体系中,所以需要对 SequoiaDB 的状态、性能指标等...

巨杉数据库
24分钟前
6
0
如何导入其他Python文件? - How to import other Python files?

问题: How do I import other files in Python? 如何在Python中导入其他文件? How exactly can I import a specific python file like import file.py ? 我究竟该如何导入特定的python文件......

fyin1314
33分钟前
14
0
小程序上传图片 返回的地址出现回车空格问题

不知怎么回事 ,今天写小程序上传图片 之前是没问题的,今天突然出现很多回车空格问题 那怎么办呢,处理呗 //去掉空格str = str.replace(/\ +/g,""); console.log(str);//"{'retmsg':'suc......

子枫Eric
43分钟前
6
0
Spring Boot + Spring Security自定义用户认证

自定义认证过程 自定义认证的过程需要实现Spring Security提供的UserDetailService接口 ,源码如下: public interface UserDetailsService { UserDetails loadUserByUsername(String use...

心田已荒
今天
12
0
DateTime2与SQL Server中的DateTime - DateTime2 vs DateTime in SQL Server

问题: Which one: 哪一个: datetime datetime2 is the recommended way to store date and time in SQL Server 2008+? 是在SQL Server 2008+中存储日期和时间的推荐方法吗? I'm aware of......

富含淀粉
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部