Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leafOfTree/react-int
A simple way to use react/react-native with redux and redux-saga.
https://github.com/leafOfTree/react-int
dva react redux redux-saga
Last synced: 2 months ago
JSON representation
A simple way to use react/react-native with redux and redux-saga.
- Host: GitHub
- URL: https://github.com/leafOfTree/react-int
- Owner: leafOfTree
- License: mit
- Created: 2019-04-19T09:36:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T11:33:44.000Z (over 1 year ago)
- Last Synced: 2024-01-29T11:36:29.112Z (5 months ago)
- Topics: dva, react, redux, redux-saga
- Language: JavaScript
- Homepage: https://leafoftree.github.io/react-int/
- Size: 689 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
Lists
- awesome-react-native - react-int - A simple way to use react/react-native with redux and redux-saga. (Seeds / Other Platforms)
- awesome-react-native - react-int - A simple way to use react/react-native with redux and redux-saga. (Seeds / Other Platforms)
- awesome - react-int - A simple way to use react/react-native with redux and redux-saga. (Seeds / Other Platforms)
- awesome-react-native - react-int - A simple way to use react/react-native with redux and redux-saga. (Seeds / Other Platforms)
- awesome-react-native - react-int - A simple way to use react/react-native with redux and redux-saga. (Seeds / Other Platforms)
README
React-Int(egrity)
A simple way to use [React][0]/[React Native][5] with [react-redux][1] and [redux-saga][2]. Keep most things in one file(model) like [Dva][3].
## 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][8].
- Works with [create-react-app][4].
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. :tada:
```javascript
// 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: [](https://codesandbox.io/s/61wpmyj04r?fontsize=14)
- [Quick start][6]
- [APIs][7]
## Usage with React Native
See [Usage with React Native][8]
## 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](https://leafoftree.github.io/react-int).
Refer to [react][0], [react-redux][1], [redux-saga][2] for further documentation.
## Development
See Development.
[0]: https://github.com/facebook/react
[1]: https://github.com/reduxjs/react-redux
[2]: https://github.com/redux-saga/redux-saga
[3]: https://github.com/dvajs/dva
[4]: https://github.com/facebook/create-react-app
[5]: https://github.com/facebook/react-native
[6]: https://leafoftree.github.io/react-int/#/quick_start
[7]: https://leafoftree.github.io/react-int/#/apis
[8]: https://leafoftree.github.io/react-int/#/usage_with_react_native