https://github.com/linweiwei123/booto
πA light framework for React Application. Easy for life!
https://github.com/linweiwei123/booto
dva minify mirror react redux redux-saga
Last synced: 7 months ago
JSON representation
πA light framework for React Application. Easy for life!
- Host: GitHub
- URL: https://github.com/linweiwei123/booto
- Owner: linweiwei123
- Created: 2019-07-24T13:18:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:19:19.000Z (over 3 years ago)
- Last Synced: 2025-02-04T19:40:54.511Z (over 1 year ago)
- Topics: dva, minify, mirror, react, redux, redux-saga
- Language: JavaScript
- Size: 2.53 MB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
>
# booto 
[](https://www.npmjs.com/package/booto) [](https://standardjs.com)
English | [δΈζ](./README_ZH.md)
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](https://github.com/dvajs/dva) and [mirror](https://github.com/mirrorjs/mirror), but booto is much more simple, easy to learn, and seamless to use if you are a react user already.
[full use demo](https://stackblitz.com/edit/react-2q2uoa)
## Author speak
It's written by simple way and no magic, just about 200 lines of easy code, please be pleasure to try.
## Features
π½ 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
## Install
```bash
npm install --save booto
```
## Import
```jsx
import booto from 'booto';
```
## Useage
The simple useage - A counter demo;
[The full use]
```jsx
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 => (
{props.counter.count}
props.dispatch('counter/count/add')}>Add
props.dispatch('counter/count/minus')}>minus
)
);
booto.start(,'#root');
```
## API
### setup
```jsx
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
#### Use community middlewares
use is a function to use middlewares, It's just the same as redux.
```javascript
import { createLogger } from 'redux-logger';
booto.use(createLogger());
```
#### Use of built-in promise Middleware
Built-in promise middleware, asynchronous action, is particularly simple to use
```jsx
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 ( asyncAdd() }>async Add)
};
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)
#### Use ustom middleware
It's the same as redux.
```javascript
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.
### start
```jsx
booto.start(,'#root');
```
### Other native api
#### store
```javascript
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
#### history
```javascript
const history = booto.history;
```
## todo
- π booto-cli
- π booto-router
- ποΈ booto-realworld-app
- π― Integrate in [multipages-generator(A fast CLI for mobile H5)](https://github.com/linweiwei123/multipages-generator)
## License
MIT Β© [](https://github.com/)