README-en_US.md

rxloop

中文 README

rxloop = Redux + redux-observable.

RxJS-based predictable state management container, ultra-lightweight "Redux + redux-observable" architecture.

Features

• Facilitate the abstract front-end domain model, free choice of multi-state or single state tree;
• Easy to learn and use: Only four apis, friendly to Redux and RxJS;
• Isolation side effects: using the asynchronous processing capabilities of RxJS, free combination, cancel AJAX and other asynchronous calls in the Pipes;
• Extensions RxJS: rxloop can be cascaded into RxJS data pipelines, eventually distributing multiple data pipes.

Installation

Via npm:

$ npm install @rxloop/core

Or yarn

$ yarn add @rxloop/core

Or introduced through CDN

<script src="https://unpkg.com/@rxloop/core@0.6.1/dist/rxloop.min.js"></script>
<script src="https://unpkg.com/rxjs@6.2.0/bundles/rxjs.umd.min.js"></script>
<script>
var app = rxloopCore();
app.model({
  name: 'user',
  state: { name: 'wxnet' }
});
</script>

Hello rxloop

import rxloop from '@rxloop/core';

// Create a globally unique app in one application
const app = rxloop();

// In the application, 
// you can create multiple business models,
// such as the following user and counter models
app.model({
  name: 'user',
  state: { name: 'wxnet' }
});
app.model({
  name: 'counter',
  state: {
    counter: 0,
  },
  reducers: {
    inc(state) {
      return {
        ...state,
        counter: state.counter + 1
      };
    },
    dec(state) {
      return {
        ...state,
        counter: state.counter - 1
      };
    },
  },
});

// Subscribe to the status of the counter model at the View level,
// When the model state changes,
// use View layer framework-related methods to synchronize View updates,
// such as React's setState method
app.stream('counter').subscribe((state) => {
  // this.setState(state);
});

// In the view layer,
// you can dispatch an action via the dispatch method
// Action updates the model state via pipes or reducers
app.dispatch({
  type: 'counter/inc',
});
app.dispatch({
  type: 'counter/inc',
});
app.dispatch({
  type: 'counter/dec',
});

For more features such as asynchronous requests, cancellation requests, etc., you can read through the documentation 👇.

Documentation

1. Quick start
2. Error handling
3. Integration with RxJS
4. Multi-state and single-state trees

Examples

1. counter-basic
2. ajax-cancel
3. error-handler
4. React todolist app with rxloop

License

MIT