Skip to content

leafOfTree/react-int

Folders and files

NameName
Last commit message
Last commit date

Latest commit

18850cf Â· Sep 16, 2024
May 10, 2019
Jan 3, 2020
May 9, 2019
May 10, 2019
May 10, 2019
Apr 23, 2019
Apr 28, 2019
Apr 24, 2019
Apr 17, 2019
Sep 16, 2024
Apr 17, 2019
May 9, 2019
Jan 3, 2023
Jan 3, 2023

Repository files navigation

React-Int

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

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.

About

A simple way to use react/react-native with redux and redux-saga.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published