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