{"id":25455285,"url":"https://github.com/linweiwei123/booto","last_synced_at":"2025-11-02T09:30:34.908Z","repository":{"id":35032910,"uuid":"198639463","full_name":"linweiwei123/booto","owner":"linweiwei123","description":"😍A light framework for React Application. Easy for life!","archived":false,"fork":false,"pushed_at":"2023-01-04T05:19:19.000Z","size":2658,"stargazers_count":19,"open_issues_count":45,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-04T19:40:54.511Z","etag":null,"topics":["dva","minify","mirror","react","redux","redux-saga"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linweiwei123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-24T13:18:51.000Z","updated_at":"2023-03-08T03:19:04.000Z","dependencies_parsed_at":"2023-01-15T12:30:45.782Z","dependency_job_id":null,"html_url":"https://github.com/linweiwei123/booto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fbooto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fbooto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fbooto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fbooto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linweiwei123","download_url":"https://codeload.github.com/linweiwei123/booto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239389539,"owners_count":19630310,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dva","minify","mirror","react","redux","redux-saga"],"created_at":"2025-02-18T00:57:09.308Z","updated_at":"2025-11-02T09:30:34.858Z","avatar_url":"https://github.com/linweiwei123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e\n# booto ![images](./icon.png) \n[![NPM](https://img.shields.io/npm/v/booto.svg)](https://www.npmjs.com/package/booto) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nEnglish | [中文](./README_ZH.md)\n\nBooto 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. \n\n[full use demo](https://stackblitz.com/edit/react-2q2uoa)\n\n## Author speak\nIt's written by simple way and no magic, just about 200 lines of easy code, please be pleasure to try.  \n\n## Features\n🎽 Just 3 simple api  \n🕋 Divide state and reducer by module   \n🎭 Support sync and async action(of course, it's easy)  \n🛣️ Easy to use history api to route  \n🌆 All the redux api can be accessed  \n🎨 Retain middleware, support redux community middlewares and customer.\n🎗️ support typescript\n\n## Install\n\n```bash\nnpm install --save booto\n```\n\n## Import\n```jsx\nimport booto from 'booto';\n```\n\n## Useage\n\nThe simple useage - A counter demo;\n[The full use]\n\n```jsx\nimport React from 'react';\nimport booto, { connect } from 'booto';\n\nbooto.setup(\n  {\n    module: 'counter',\n    state: {\n      count: 0\n    },\n    reducers: {\n      count: {\n        add: count =\u003e count + 1,\n        minus: count =\u003e count - 1\n      }\n    }\n  }\n);\n\nconst App = connect(counter =\u003e counter)(props =\u003e (\n    \u003cdiv className=\"App\"\u003e\n      \u003cdiv\u003e{props.counter.count}\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e props.dispatch('counter/count/add')}\u003eAdd\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e props.dispatch('counter/count/minus')}\u003eminus\u003c/button\u003e\n    \u003c/div\u003e\n  )\n);\n\nbooto.start(\u003cApp/\u003e,'#root');\n\n```\n\n## API\n\n### setup\n```jsx\nbooto.setup([\n  {\n    module: 'counter',   //module counter\n    state: {             //module counter's state\n      count: 0,          \n      times: 0\n    },\n    reducers: {\n      count: {           //count's reducer function. this get 3\n        add: count =\u003e count + 1,\n        minus: count =\u003e count - 1,\n        resetCount: (count, payload) =\u003e payload\n      },\n      times: {           //times's reducer function. this get 1\n        add: (time = 0) =\u003e time + 1,\n      }\n    }\n  },\n  {\n    module: 'user',       //mmodule user\n    state: {\n      history: []\n    },\n    reducers: {\n      history: {\n        add: (history = [], payload) =\u003e payload ? [...history, payload] : history\n      }\n    }\n  }\n]);\n```\nsetup support Object and Array too, object is a module.\n- module String, the module name. use for namespace. when dispatch it need specify the module.\n- state Object, state in a module, need the initial data\n- 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.\n\n### use\n\n#### Use community middlewares\nuse is a function to use middlewares, It's just the same as redux.\n```javascript\nimport { createLogger } from 'redux-logger';\n\nbooto.use(createLogger());\n```\n\n#### Use of built-in promise Middleware\nBuilt-in promise middleware, asynchronous action, is particularly simple to use\n\n```jsx\nimport React from 'react';\nimport { connect } from '../booto';\n\nconst Card = (props) =\u003e {\n  const asyncAdd = () =\u003e{\n    props.dispatch({\n      type: 'counter/count/add',\n      payload: new Promise(resolve =\u003e setTimeout(()=\u003eresolve(1), 1000))\n    })\n  };\n  return (\u003cbutton onClick={()=\u003e asyncAdd() }\u003easync Add\u003c/button\u003e)\n};\n\nexport default connect()(Card)\n```\nSimply 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)\n\n#### Use ustom middleware\nIt's the same as redux.\n```javascript\nconst actionRecordMiddleWare = store =\u003e next =\u003e action =\u003e{\n  if(action.type !== 'user/history/add'){\n    store.dispatch({\n      type: 'user/history/add',\n      payload: {\n        action: action.type,\n        time: new Date().getTime()\n      }\n    });\n    next(action)\n  }\n  else {\n    next(action)\n  }\n};\n\nbooto.use(actionRecordMiddleWare);\n```\nThe above is a middleware that records all actions. All action operations and operation time will be recorded except for the 'user/history/add' itself.\n\n### start\n```jsx\nbooto.start(\u003cApp/\u003e,'#root');\n```\n### Other native api\n\n#### store\n```javascript\nconst store = booto.store;\nstore.subscribe(() =\u003e {\n  console.log(store.getState());\n});\n```\nYou can get the store object, access the getState, subscribe, dispatch, replaceReducer and other methods, that is, the method that the store itself has\n\n#### history\n```javascript\nconst history = booto.history;\n```\n\n## todo\n- 🌐 booto-cli\n- 🚊 booto-router\n- 🏞️ booto-realworld-app\n- 💯 Integrate in [multipages-generator(A fast CLI for mobile H5)](https://github.com/linweiwei123/multipages-generator)\n\n## License\n\nMIT © [](https://github.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinweiwei123%2Fbooto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinweiwei123%2Fbooto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinweiwei123%2Fbooto/lists"}