English | δΈζ
Booto is a easy to use framework for react applications. It's base by react, redux and react-router.If you think redux is too cumbersome and your programming ideas are often interrupted, booto is design for you. Booto is a little same like Dva and mirror, but booto is much more simple, easy to learn, and seamless to use if you are a react user already.
It's written by simple way and no magic, just about 200 lines of easy code, please be pleasure to try.
π½ Just 3 simple api
π Divide state and reducer by module
π Support sync and async action(of course, it's easy)
π£οΈ Easy to use history api to route
π All the redux api can be accessed
π¨ Retain middleware, support redux community middlewares and customer.
ποΈ support typescript
npm install --save bootoimport booto from 'booto';The simple useage - A counter demo; [The full use]
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', //module counter
state: { //module counter's state
count: 0,
times: 0
},
reducers: {
count: { //count's reducer function. this get 3
add: count => count 1,
minus: count => count - 1,
resetCount: (count, payload) => payload
},
times: { //times's reducer function. this get 1
add: (time = 0) => time 1,
}
}
},
{
module: 'user', //mmodule user
state: {
history: []
},
reducers: {
history: {
add: (history = [], payload) => payload ? [...history, payload] : history
}
}
}
]);setup support Object and Array too, object is a module.
- module String, the module name. use for namespace. when dispatch it need specify the module.
- state Object, state in a module, need the initial data
- reducer Object each state has reducers. async action is supported be default in a promise way, If you need the other way of async action, see the use api as followed.
use is a function to use middlewares, It's just the same as redux.
import { createLogger } from 'redux-logger';
booto.use(createLogger());Built-in promise middleware, asynchronous action, is particularly simple to use
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)Simply pass the asynchronous promise object to the payload, and the payload will call the synchronous action corresponding to 'counter/count/add' in the then method of the promise. (πNote: Don't be confused by synchronous or asynchronous, it is actually the problem of calling timing. Asynchronous needs the method of the then method of the promise to trigger the synchronous method, and nothing more)
It's the same as 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);The above is a middleware that records all actions. All action operations and operation time will be recorded except for the 'user/history/add' itself.
booto.start(<App/>,'#root');const store = booto.store;
store.subscribe(() => {
console.log(store.getState());
});You can get the store object, access the getState, subscribe, dispatch, replaceReducer and other methods, that is, the method that the store itself has
const history = booto.history;- π booto-cli
- π booto-router
- ποΈ booto-realworld-app
- π― Integrate in multipages-generator(A fast CLI for mobile H5)