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

我厭倦了react的各類詞彙,一來雲裏霧裏的我聽不懂,可是我看了redux源碼不過三兩個函數,平平無奇,因而乎本身操刀寫一框架,爲了2件事:一、告訴你們不用迷信框架,你花點時間2天也能搞一個。二、給我本身的項目作腳手架用javascript

話很少說,直接上github連接 Booto前端

tiny app demojava

什麼是booto

Booto 是一個極易使用的爲react應用設計的框架,他基於react、redux、react-router。主要解決redux繁瑣使用的問題,若是你也認爲redux概念太多,使用繁瑣,而且常常把編程思路打亂那麼booto多是你的菜。他跟Dva、mirror有點相似,可是實現更佳簡單,易於理解,便於快速開發react應用。Booto旨在幫助你避開那些沒什麼卵用的redux配套詞彙,認真學習編程工程理論,而不是記憶這該死的Api。react

why booto?

時下react全家桶是web前端框架的主流,但react配套的redux、react-router、connected-react-router、react-saga、react-thunk等等概念太多,項目結構散亂,編程思路容易被打斷,編程體驗不佳。基於我自身的項目經驗,對今生態作了一個封裝,因而誕生了booto。git

什麼??又出輪子?

booto不是輪子,實際上它總共200多行,自己沒什麼高級的東西,是我本身基於經驗,提煉的一個框架重構與封裝。旨在告訴你們,那些充斥耳朵的高大上詞彙沒啥難的(最難的就是詞彙量大,記不住),你想擼一個你必定會。但booto實現很簡單,若是能看源碼必定對react全家桶特別是redux配套的組件的理解達到一個比較清晰的層度。github

booto其實很是簡單,只有百來行代碼,沒有魔法,沒有晦澀難懂的函數與概念。其實是對redux的簡單描述,如能看了源碼會對redux有清晰的理解。web

Features

🎽只有3個api
🕋按模塊劃分state與reducer
🎭支持同步、異步action
🛣️方便訪問路由狀態
🌆任何redux的方法和屬性都能訪問,容易擴展
🎨保留中間件機制,兼容redux社區中間件,自定義中間件等npm

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支持單個對象,也支持數組。某個對象是一個模塊。redux

  • 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

License

MIT ©

相關文章
相關標籤/搜索