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的用法，后續會持續更新更復雜、更多樣性的狀態資料處理案例，

標籤：JavaScript

上一篇：5.通過定位實作二級選單

下一篇：前端日常作業中常用開發小技巧 ---JavaScript