Booto框架今日发布-我自己再也不被react全家桶搞晕乎了

我厌倦了react的各种词汇，一来云里雾里的我听不懂，但是我看了redux源码不过三两个函数，平平无奇，于是乎自己操刀写一框架，为了2件事：1、告诉大家不用迷信框架，你花点时间2天也能搞一个。2、给我自己的项目做脚手架用

话不多说，直接上github链接 Booto

tiny app demo

什么是booto

Booto 是一个极易使用的为react应用设计的框架，他基于react、redux、react-router。主要解决redux繁琐使用的问题，如果你也认为redux概念太多，使用繁琐，并且经常把编程思路打乱那么booto可能是你的菜。他跟Dva、mirror有点类似，但是实现更佳简单，易于理解，便于快速开发react应用。Booto旨在帮助你避开那些没什么卵用的redux配套词汇，认真学习编程工程理论，而不是记忆这该死的Api。

why booto？

时下react全家桶是web前端框架的主流，但react配套的redux、react-router、connected-react-router、react-saga、react-thunk等等概念太多，项目结构散乱，编程思路容易被打断，编程体验不佳。基于我自身的项目经验，对此生态做了一个封装，于是诞生了booto。

什么？？又出轮子？

booto不是轮子，实际上它总共200多行，本身没什么高级的东西，是我自己基于经验，提炼的一个框架重构与封装。旨在告诉大家，那些充斥耳朵的高大上词汇没啥难的（最难的就是词汇量大，记不住），你想撸一个你一定会。但booto实现很简单，如果能看源码一定对react全家桶特别是redux配套的组件的理解达到一个比较清晰的层度。

booto其实非常简单，只有百来行代码，没有魔法，没有晦涩难懂的函数与概念。实际上是对redux的简单描述，如能看了源码会对redux有清晰的理解。

Features

🎽只有3个api
🕋按模块划分state与reducer
🎭支持同步、异步action
🛣️方便访问路由状态
🌆任何redux的方法和属性都能访问，容易扩展
🎨保留中间件机制，兼容redux社区中间件，自定义中间件等

Install

npm install --save booto

Import

import booto from 'booto';

Useage

最简使用案例代码：加减计数器案例

import React from 'react';
import booto, { connect } from 'booto';

booto.setup(
  {
    module: 'counter',
    state: {
      count: 0
    },
    reducers: {
      count: {
        add: count => count + 1,
        minus: count => count - 1
      }
    }
  }
);

const App = connect(counter => counter)(props => (
    <div className="App">
      <div>{props.counter.count}</div>
      <button onClick={() => props.dispatch('counter/count/add')}>Add</button>
      <button onClick={() => props.dispatch('counter/count/minus')}>minus</button>
    </div>
  )
);

booto.start(<App/>,'#root');

API介绍

setup

booto.setup([
  {
    module: 'counter',   //模块1
    state: {             //模块下的state对象
      count: 0,          
      times: 0
    },
    reducers: {
      count: {           //count对应reducer方法，此处有3个
        add: count => count + 1,
        minus: count => count - 1,
        resetCount: (count, payload) => payload
      },
      times: {           //times对应reducer方法，此处有1个
        add: (time = 0) => time + 1,
      }
    }
  },
  {
    module: 'user',       //模块2
    state: {
      history: []
    },
    reducers: {
      history: {
        add: (history = [], payload) => payload ? [...history, payload] : history
      }
    }
  }
]);

setup支持单个对象，也支持数组。某个对象是一个模块。

• module 字符串 模块名，用于划分模块，作为命名空间。dispatch对应需要加上模块名；
• state 对象 对应模块的state，需要初始化值；
• reducer 对象 子属性对应各个state的reducer，异步的reducer目前默认；支持promise的方式，如需其他需要在中间件重扩展，请查看use api；

use

使用社区中间件

use是使用中间件的方法，与redux的中间件使用方式无异

import { createLogger } from 'redux-logger';

booto.use(createLogger());

内置promise中间件的使用

内置promise中间件，即异步action, 使用特别简单

import React from 'react';
import { connect } from '../booto';

const Card = (props) => {
  const asyncAdd = () =>{
    props.dispatch({
      type: 'counter/count/add',
      payload: new Promise(resolve => setTimeout(()=>resolve(1), 1000))
    })
  };
  return (<button onClick={()=> asyncAdd() }>async Add</button>)
};

export default connect()(Card)

只需将异步promise对象传递给payload，payload会在promise的then方法重调用'counter/count/add'对应的同步action。（😊注：不要被同步异步搞混了，实际上就是调用时机的问题，异步的需要promise的then方法触发后调用同步方法，仅此而已）

自定义中间件

自定义中间件与redux一样，

const actionRecordMiddleWare = store => next => action =>{
  if(action.type !== 'user/history/add'){
    store.dispatch({
      type: 'user/history/add',
      payload: {
        action: action.type,
        time: new Date().getTime()
      }
    });
    next(action)
  }
  else {
    next(action)
  }
};

booto.use(actionRecordMiddleWare);

上面是一个记录所有action的中间件，除了记录用的'user/history/add'本身外，所有的action操作与操作时间都会被记录

start

booto.start(<App/>,'#root');

其他原生api

store对象

const store = booto.store;
store.subscribe(() => {
  console.log(store.getState());
});

可以获取store对象，访问getState、subscribe、dispatch、replaceReducer等方法，即store自身有的方法

history

const history = booto.history;

todo

• 🌐 booto-cli
• 🚊 booto-router
• 🏞️ booto-realworld-app
• 💯 Integrate in multipages-generator(A fast CLI for mobile H5)

License

MIT ©