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的用法，後續會持續更新更複雜、更多樣性的狀態數據處理案例。

版權聲明：本文為博主原創文章，轉載請附上原文出處鏈接和本聲明。