我厭倦了react的各類詞彙,一來雲裏霧裏的我聽不懂,可是我看了redux源碼不過三兩個函數,平平無奇,因而乎本身操刀寫一框架,爲了2件事:一、告訴你們不用迷信框架,你花點時間2天也能搞一個。二、給我本身的項目作腳手架用javascript
話很少說,直接上github連接 Booto前端
tiny app demojava
Booto 是一個極易使用的爲react應用設計的框架,他基於react、redux、react-router。主要解決redux繁瑣使用的問題,若是你也認爲redux概念太多,使用繁瑣,而且常常把編程思路打亂那麼booto多是你的菜。他跟Dva、mirror有點相似,可是實現更佳簡單,易於理解,便於快速開發react應用。Booto旨在幫助你避開那些沒什麼卵用的redux配套詞彙,認真學習編程工程理論,而不是記憶這該死的Api。react
時下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
🎽只有3個api
🕋按模塊劃分state與reducer
🎭支持同步、異步action
🛣️方便訪問路由狀態
🌆任何redux的方法和屬性都能訪問,容易擴展
🎨保留中間件機制,兼容redux社區中間件,自定義中間件等npm
npm install --save booto
複製代碼
import booto from 'booto';
複製代碼
最簡使用案例代碼:加減計數器案例編程
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');
複製代碼
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
use是使用中間件的方法,與redux的中間件使用方式無異
import { createLogger } from 'redux-logger';
booto.use(createLogger());
複製代碼
內置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操做與操做時間都會被記錄
booto.start(<App/>,'#root');
複製代碼
const store = booto.store;
store.subscribe(() => {
console.log(store.getState());
});
複製代碼
能夠獲取store對象,訪問getState、subscribe、dispatch、replaceReducer等方法,即store自身有的方法
const history = booto.history;
複製代碼
MIT ©