Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raisemarketplace/ground-control
Scalable reducer management & powerful data fetching for React Router & Redux.
https://github.com/raisemarketplace/ground-control
Last synced: 24 days ago
JSON representation
Scalable reducer management & powerful data fetching for React Router & Redux.
- Host: GitHub
- URL: https://github.com/raisemarketplace/ground-control
- Owner: raisemarketplace
- License: mit
- Archived: true
- Created: 2016-01-19T21:39:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-24T13:56:26.000Z (about 2 years ago)
- Last Synced: 2024-04-24T01:22:20.012Z (8 months ago)
- Language: JavaScript
- Size: 217 KB
- Stars: 260
- Watchers: 15
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-redux - ground-control - Scalable reducer management & powerful data fetching for React Router & Redux. (React Integration / Routing)
README
# GroundControl
**IMPORTANT!** This a beta! Use cautiously until we release 1.0 (then strict semver)! Tests coming...
GroundControl simplifies React-Router/Redux single page applications:
- Organizes reducers based on route structure, and builds application state & replaces reducers on transition.
- Data fetching API to control when to render components & manage client / server differences (Universal API).
```javascript
(
)}>
```
**Demo** Clone & ```npm i && npm start```.
**Install** ```npm install ground-control --save-dev```
---
###### Nested application state
*Declare a reducer as a property on your routes. Global application state will automatically build. When a nested route changes, that level of state will clear, and reducers replaced...*
```javascript
{
groundcontrol: {
self: { currentUser }, // path: "/" -- root component / layout.
child: {
self: { items }, // path: "/items" -- 1st level route.
child: {
self: { item }, // path: "/items/:id" -- nested
},
},
},
}
```
*...and the data is automatically fed in to your route components.*
```javascript
// { self: { currentUser: 'Nick' }, child: { self: { items: ['a', 'b'] }, child: { self: { item: { quantity: 100 }}}}}
const LayoutComponent = ({ children, data, dispatch }) => (
{data.currentUser}
{children}
);
// { self: { items: ['a', 'b'] }, child: { self: { item: { quantity: 100 }}}}
const ItemsRouteComponent = ({ data }) =>
{data.items.length}
;
// { self: { item: { quantity: 100 }}}
const ItemRouteComponent = ({ data }) =>
{data.item.quantity}
;
```
###### Universal data fetching API
*Inverse route lifecycle hooks - you tell the framework what to do...*
```javascript
async function asyncEnter(done, { clientRender, serverRender, dispatch, isClient }) => {
clientRender();
const topOfPageData = await fetchTopOfPage();
dispatch(actions.loadTop(topOfPageData));
serverRender();
if (isClient()) {
const bottomOfPageData = await fetchBottomOfPage();
dispatch(actions.loadBottom(bottomOfPageData));
done();
}
};
```
###### Redux & friends
*Plays nicely (hopefully)...*
- [x] React
- [x] Redux
- [x] React Router
- [x] Universal rendering (isomorphic)
- [x] Immutable.js
- [x] Redux Simple Router
- [x] React-Redux (if desired)
- [x] Redux DevTools
- [x] Thunk / middleware
- [x] Redux-loop
- [ ] Others?
---
### How to use
- [Rationale](https://github.com/raisemarketplace/ground-control/wiki/Rationale)
- [Tutorial](https://github.com/raisemarketplace/ground-control/wiki/Tutorial)
- [API Reference](https://github.com/raisemarketplace/ground-control/wiki/API-Reference)
- [Road to V1](https://github.com/raisemarketplace/ground-control/wiki/Road-to-V1)
- [Example 1 (Simple)](https://github.com/raisemarketplace/ground-control-example-simple)
- [Example 2 (Full)](https://github.com/raisemarketplace/ground-control-example-full)
### Contribute
- [ ] API improvements
- [ ] Better documentation
- [ ] Unit tests
Please note that this project is released with a [Contributor Code of
Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to
abide by its terms. Multiple language translations are available at
[contributor-covenant.org](http://contributor-covenant.org/version/1/3/0/i18n/)
### Why *GroundControl* as a name?
- [Tribute to one of best artists ever](https://www.youtube.com/watch?v=D67kmFzSh_o)
- Layer above your application to help you control data.
- API to fetch data for your routes.
- Clean up state from previous routes.
- Updates store with new reducers.
**Special thanks to [ryan florence](https://github.com/ryanflorence)! Initially based on [async-props](https://github.com/rackt/async-props).**