Booto框架今日發佈-我本身不再被react全家桶搞暈乎了

我厭倦了react的各類詞彙，一來雲裏霧裏的我聽不懂，可是我看了redux源碼不過三兩個函數，平平無奇，因而乎本身操刀寫一框架，爲了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 ©