I’m tired of the react vocabulary, but I don’t understand it, but I read the redux source code and only have three or two functions, which are mediocre, so I write a framework myself, for two things: 1, to tell everyone that there is no need to superstition framework, you can spend a few days to build a framework. 2. Scaffolding my own projects

Without further ado, go directly to Github link Booto

tiny app demo

What is a booto

Booto is an easy-to-use framework designed for React applications. It is based on React, Redux, and React-Router. If you think Redux is too much of a concept, too cumbersome to use, and often messing up your programming, booto might be your thing. React is similar to Dva and Mirror, but the implementation is simpler and easier to understand, making it easier to quickly develop React applications. Booto is designed to help you avoid useless Redux vocabulary and get down to learning programming engineering theory instead of memorizing the damn Api.

According to booto?

Currently, react family bucket is the mainstream web front-end framework. However, there are too many concepts supporting React, redux, react-Router, Connected – React-Router, react-Saga, react-Thunk, etc. The project structure is fragmented, and programming ideas are easy to be broken. Poor programming experience. Based on my own project experience, I encapsulated this ecology and booTO was born.

What?? Off the wheel again?

Booto is not a wheel. In fact, it has more than 200 lines in total, and there is nothing advanced in itself. It is a framework reconstruction and encapsulation refined by myself based on experience. The aim is to show that there is nothing difficult about the words that fill your ears (the hardest part is that you have a large vocabulary and can’t remember them), and if you want to learn one, you will. However, booto implementation is very simple. If you can read the source code, you must understand the React family bucket, especially redux components to achieve a relatively clear level of understanding.

Booto is very simple, just a hundred lines of code, no magic, no arcane functions and concepts. Redux is actually a simple description of Redux, if you can read the source code will have a clear understanding of Redux.

Features

🎽 there are only three apis 🕋 divided by module State and Reducer 🎭 Support synchronous and asynchronous Action 🛣 convenient access to routing state. All methods and attributes of REdux can be accessed. It is easy to expand the mechanism of the retention middleware of the policy, and it is compatible with redux community middleware and custom middleware

Install

npm install --save booto
Copy the code

Import

import booto from 'booto';
Copy the code

Useage

Simplest use case code: add and subtract counter cases

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');

Copy the code

The API is introduced

setup

booto.setup([
  {
    module: 'counter'./ / module 1
    state: {             // The state object under the module
      count: 0.times: 0
    },
    reducers: {
      count: {           //count corresponds to reducer methods, there are three
        add: count= > count + 1.minus: count= > count - 1.resetCount: (count, payload) = > payload
      },
      times: {           //times corresponds to the reducer method, and there is one
        add: (time = 0) = > time + 1,}}}, {module: 'user'./ / module 2
    state: {
      history: []},reducers: {
      history: {
        add: (history = [], payload) = > payload ? [...history, payload] : history
      }
    }
  }
]);
Copy the code

Setup supports single objects as well as arrays. An object is a module.

  • Module String Specifies the name of a module, which is used as a namespace. The module name should be added for dispatch.
  • State Specifies the state of the corresponding module, which needs to be initialized.
  • Subattributes of the Reducer object correspond to all state reducers, and the asynchronous Reducer is currently default. For other ways to support Promise, see the USE API if you need to re-extend the middleware.

use

Using community Middleware

Use is the way middleware is used, just as redux uses middleware

import { createLogger } from 'redux-logger';

booto.use(createLogger());
Copy the code

Use of the built-in Promise middleware

The built-in Promise middleware, known as asynchronous actions, is particularly easy 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)Copy the code

You simply pass the asynchronous promise object to payload, which calls the synchronous action corresponding to ‘counter/count/add’ again in the promise’s then method. (😊 note: not to be confused with synchronous asynchracy, it’s actually a matter of timing, asynchronous requires that promise’s then method be triggered and then the synchronous method is called, and that’s it)

Custom middleware

Custom middleware, like 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);
Copy the code

Above is a middleware that records all actions, except for the ‘user/history/add’ itself, all action actions and action times are recorded

start

booto.start(<App/>.'#root');
Copy the code

Other native apis

Store object

const store = booto.store;
store.subscribe((a)= > {
  console.log(store.getState());
});
Copy the code

You can obtain store objects, access getState, Subscribe, Dispatch, replaceReducer and other methods, that is, the store itself has methods

history

const history = booto.history;
Copy the code

todo

  • 🌐 booto – cli
  • 🚊 booto – the router
  • 🏞 ️ booto – realworld – app
  • 💯 Integrate in Multipages – Generator (A fast CLI for Mobile H5)

License

MIT ©