Rematch的深入学习与实战应用（一），简易数字计数器

摘要

 　　近期在优化团队代码，发现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的用法，后续会持续更新更复杂、更多样性的状态数据处理案例。