摘要
近期在優化團隊代碼，發現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的用法，后續會持續更新更復雜、更多樣性的狀態數據處理案例。