如果高效率对react 项目模块化管理-使用入门

有一定react项目开发经验的开发人员肯定会遇到这种问题， 对于单页面应用的项目，特别是使用到redux 来管理react数据的项目，随着项目的不断迭代， 项目会变的越来越大， 项目维护成本越来越大，主要表现在，命名冲突， action重复定义， 打包越来越慢， 当添加一个操作action，可能要同时修改好几个地方， 无形中增加了修改代码风险， 有没有什么办法解决上面那些问题呢。。。

方法肯定是有的， 给大家推荐一个框架， 专门用于管理redux中的数据， 叫react-spirits（中文名叫react精灵）， 是一个非常强大的模块管理库，库本身非常小巧， react-spirits 框架本身是对redux进行了二次封装， 重新定义了redux开发模式， 接下来介绍一下正常redux开发模式和react-spirits 开发模式的区别。

首先谈谈传统的redux用法吧，如果我们按照正常流程， 我们会定义一些列actions,里面有各种业务逻辑操作，比如发送请求， 然后 dispatch一个action消息， 比如{type: ADD_USER, payload: 'hello'}，action传给 reducer， reducer对state进行操作， 整个流程下来， 我们需要定义action， 然后再定义一个常量， 最后定义 reducer， 至少需要修改三处地方， 是不是特别繁琐， 哈哈

接下来介绍今天的主角 react-spirits, react-spirits 引用了模块的概念， 模块都是独立的，通过简单的配置项， 再通过一系列封装，底层已经就已经包含 actions, 常量，reducer一些列逻辑， 这样就意味着每个模块都是独立的， 同时模块定义的时候已经封装了模块热加载逻辑，接下啦教大家怎么使用react-spirits, 首先安装react-spirits，

npm install react-spirits --save(yarn add react-spirits)

接下来定义一个模块

import {connect} from 'react-spirits';

const model = {

ns: 'report',

state: {

abc: 123,

},

mutations: {

changeAbc(state, payload) {

state.abc = payload;

},

},

actions: {

getUserInfo(payload, {commit}) {

commit('changeAbc', payload);

},

},

};

export default connect(model);

简单来说先定义一个变量， 变量里面有ns（名字空间），mutations(操作state), actions(业务逻辑操作，比如发请求， 熟悉vuex的同学对这种写法比较熟悉， 没错，react-spirits的作者就是参考了vuex的写法；最后就是通过react-spirits 里面的connect 方法进行链接再导出。 就这么简单，一个模块就这么生成了

接下来有同学会问， 那我定义了一个模块， 怎么使用所定义的模块呢？废话不多说，直接看代码

import P from 'prop-types';

import { connect } from 'react-redux';

import style from './style.less';

import model from '../../models/test';

export default

@connect(state => ({ stat: state[model.ns] }))

class App extends Component {

static propTypes = {

stat: P.objectOf(P.any).isRequired,

}

changeColor = () => {

const num = Math.random() * 1000000;

model.getUserInfo(num);

}

render() {

const {stat} = this.props;

return (

<div className="demo">

<div className={style.header} onClick={this.changeColor}>

{stat.abc}

</div>

</div>

);

}

}

看到这里， 可能有同学会问， 正常redux开发逻辑是action 需要 调用react-redux中的connect来进行dispacth方法注入，我们定义的模块中的action方法可以直接调，action中的dispatch从哪里来的呢？ 这一期暂时不讨论这个细节， 后续文章会进行讲解。

react-spirits 和大多数第三方库一样， 也有一个初始化过程， 那怎么初始化呢？

import {

createStore,

} from 'redux';

import spirits from 'react-spirits';

const store = createStore(

() => {},

window.__INITIAL_STATE__,

);

spirits(store);

export default store;

看到代码是不是感觉特别清爽，特别简单， 就是生成store的时候， 调用一下spirits方法即可。先简要透露一下， 这一步主要是把store注入到spirits中， 前面的connect函数中里面需要用到store，今天就先讲这些了， 主要是教大家怎么去使用， 具体细节方面，还有model里面的一些逻辑规则 我会在后期文档中发布出来， 敬请关注后续文章