集成react + react-router + react-redux的轻量级前端框架

集成react + react-router + react-redux的轻量级前端框架

Tomatobean

Tomatobean是一个react + redux + react-router的集成框架。它简化了三者的配置，在项目中只需少量代码就能实现复杂的功能，并且能够帮助开发者梳理工程的结构使其易于维护。tomatobean提供了大量的装饰器，为react组件提供更强大的功能。简单的语意，和使用规则让开发者迅速上手开发实现零成本学习。其中创新的使用了智能化自动装载机制，解放了程序员的双手。话不多说开搞。

版本更新历史：

V0.9.0更新文档

Examples:

example--v0.9.2

主要目录如下：

安装 快速开始 进阶routerConfigmodelsactionapi 装饰器BaseActionSelecterRootRouteConnectConfigurationTabbarNotification 配置类AuthorityInterceptor 工具方法combinModals

安装

安装命令:

npm install tomatobean

快速开始

加载配置文件生成App，就像这样

import createApp, { combinModals } from 'tomatobean';import { routerConfig } from '../config/routerConfig';import models from './models';import host from '../config/remoteHost';const app = createApp();// 加载路由配置app.router(routerConfig);// 加载数据模型app.model(models);// 配置remote hostapp.setHost(host);// 运行Appapp.run();

app的运行依赖于这三个文件。其中model配置文件涉及到开发者具体项目的业务部分，也是开发者最关系的事情，接下来我会逐一解释这三个文件的用法和作用。

进阶

routerConfig

routerConfig 这个文件主要是配置工程的路由部分。由于tomato框架集成的是react-router组件，所以在配置上跟react-router有一些相似之处。只不过为了一些特殊的功能的实现，再其基础上进行了包装。整个配置文件看起来会是这样。

export const routerConfig = { routes: [ { path: '/', component: 'App', indexRoute: { redirect: '/home' }, childRoutes: [ { path: '/home', component: 'home', state: { mark: '首页', }, }, ], }, { path: '/login', component: 'login', state: { checkAuthority: false, }, }, ], initializationTabs: [ { pathname: '/home', state: { mark: '首页', }, }, ],};

配置规则

models

models作为工程业务的主体部分，也是重点说明的模块。首先还是看一下代码。

// home.jsexport default { namespace: 'home', // 必须唯一 建议与文件名相同 state: { enters: [], }, reducers: { enters(state, action) { return { ...state, enters: action.data.data, }; }, },};

一个最为基础的model看起来就是这个样子。你可以把它理解为托管一个React组件状态的机器，或者看做MVC中的M，总之它管控着React组件数据流。

属性说明

注：

当cache: true ，在整个工程范围内，已设置的懒加载state，每条数据只会加载一次，（如果一次没有装载成功，那么接下来的取值还会继续装载，直到装载成功） 当cache: false，但autowrite有值，那么装载机制的作用范围，就是以绑定模型的组件，而不是整个工程。

reducer是一个用于响应action事件的函数，它被注入了两个参数 state 和 action。其中state为当前的所有状态，action参数为action事件传入的值。最后reducer返回一个全新的state。（温馨提示：请参照上方的代码进行理解）

action

action最基础的作用就是发起变更状态的请求。在具体的项目中，你可以将以一些了业务逻辑放在这里，也可以做单纯的数据结构处理。单独作为一个块，这样设计最初的目的也是为了解耦和复用。但多数情况下，action和model关系紧密，所以可以将两者放入一个文件中。但同时不要错误的将两者混为一谈。下面就是一个action

// homeActionimport { getEntersListRequest } from '../api/homeApi';export async function getOpportunityList(params, update) { const response = await getEntersListRequest(params); update({ type: 'home/enters', data: response, }); return response;}

api

你可以理解为持久层，他负责对接后台服务，也可以想象成数据源。将它但作为一块抽离出来目的是解耦，实现复用。

// 公共接口import request from '../util/request';import { urlAppendQuery } from '../util/tools';/** * 根据用户Id查询用户信息 */export async function queryUserByIdRequest() { return request.GET(`${host}/user-service/user/list`);}/** * 创建用户信息 */export async function saveUserRequest(params) { return request.PSOT(`${host}/user-service/save`, params);}

装饰器

Tomato提供的一些具体的方法、装饰器。这些东西能够为你的组件提供一些特殊的功能，比如：状态回滚、消息通知、路由跳转、location监听等等。

BaseAction

BaseAction提供基础功能，包括一下方法：

linkTo

语法

this.props.baseAction.linkTo(location);// 例子this.props.baseAction.linkTo("/home");this.props.baseAction.linkTo({pathname: "/home", state: "hello world"});

参数 location 路由地址信息

返回值 无

redirect

语法

this.props.baseAction.redirect(location);// 例子this.props.baseAction.redirect("/home");this.props.baseAction.redirect({pathname: "/home", state: "hello world"});

参数 location 路由地址信息

返回值 无

go

语法

this.props.baseAction.go(number);// 例子this.props.baseAction.go(1);

参数 number 回退步数

返回值 无

goBack

语法

this.props.baseAction.goBack();

参数 无

返回值 无

goForward

语法

this.props.baseAction.goForward();

参数 无

返回值 无

rollBack

语法

this.props.baseAction.rollBack(namespace);// 例子this.props.baseAction.rollBack("home");

参数 modelName 模型的命名空间，也就是模型的名称

返回值 无

Selecter

绑定model，view，action三者得工具。由Tomato划分出来的四大模块都是独立的，每一部分都不能独立工组，因为他们不是一个完整的系统。只有通过绑定，引用这些方式，组合在一起才能构成一个完整的组件。

使用实例：

import React, { Component } from 'react';import { Selecter } from 'tomatobean';import BaseActions from 'tomatobean/enhance';import { getOpportunityList } from '../../models/home';@Selecter(['home'], { getOpportunityList })export class View extends Component { componentDidMount() { const { getOpportunityList } = this.props.actions; getOpportunityList(); } render() { const { enters } = this.props.home; return (