认识达内从这里开始

摘要

近期在优化团队代码，发现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(

,

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 (

数字计数器

{number}

increase(1)}>点击加1

decrease(1)}>点击减1

)

}

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的用法，后续会持续更新更复杂、更多样性的状态数据处理案例。