React-Int(egrity)

A simple way to use React/React Native with react-redux and redux-saga. Keep most things in one file(model) like Dva.

Features

• Reducers and sagas in one file.
• Namespace.
• Key as action type. (Convenient)
• HMR everywhere. (Need extra code snippet)
• Promisified dispatch.
• Handles Effect errors without terminating app.
• Supports React Native.
• Works with create-react-app.

Feel free to make an issue or a pull request.

How it works

React-int is an encapsulation of react-redux and redux-saga, aiming to simplify code and related files. Its main job is to create store from models and render app.

Install

yarn add react-redux redux-saga react-int

# or 
npm i react-redux redux-saga react-int

Usage

Start app, write models and connect components. That's all. 🎉

// index.js
import start from "react-int";
import App from "./App";
import models from "./models";

const { updateApp, updateModels } = start(
  App,
  document.getElementById("root"),
  models,
  {/* options */},
);

// enable HMR
if (module.hot && process.env.NODE_ENV !== 'production') {
  module.hot.accept('./App', () => updateApp(App));
  module.hot.accept('./models', () => updateModels(models));
}

See also

• Full online demo:

• Quick start

• APIs

Usage with React Native

See Usage with React Native

Data Flow

                                                      --Model-- 
       defines       triggers             sync       |         |   updates
State ----------> UI ----------> Actions ----------> | Reducer | ----------> Store
  ^                                 |                |         |               |
  |                                 |     async      |         |               |
  |                                 |--------------->|  Saga   |               |
  |                                 |<---------------|         |               |
  |                                       puts        ---------                |
  |                                                                            |
   ----------------------------------------------------------------------------
                                contains

Documentation

Basic introduction can be found on the website.

Refer to react, react-redux, redux-saga for further documentation.

Development

See Development.