https://github.com/ln613/state
https://github.com/ln613/state
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ln613/state
- Owner: ln613
- License: mit
- Created: 2018-09-07T14:53:47.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T21:51:26.000Z (over 3 years ago)
- Last Synced: 2025-05-21T07:56:19.610Z (about 1 year ago)
- Language: JavaScript
- Size: 985 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# no-redux
[](https://travis-ci.org/ln613/no-redux)
A react/redux library which automates all redux flows including http calls, and store immutability is guaranteed. Redux becomes invisible to you, hence the name no-redux.
| | redux | no-redux |
|---|---|---|
| define action type | manual | manual |
| generate action creator | manual | auto |
| call action creator in components | manual | manual |
| handle action in middleware (thunk/saga...) | manual | auto |
| send http request | manual | auto |
| receive http response | manual | auto |
| handle action in reducer | manual | auto |
| ensure store immutability | manual | auto |
[slides and demo](https://ln613.github.io/no-redux)
[todo example](https://ln613.github.io/no-redux-todo-example)
[documetation](https://ln613.gitbooks.io/no-redux/)
## Install
`npm i -S no-redux`
## Usage
**Step 1**
Define an action data object, and call "generateActions" to generate action creators.
```js
import { generateActions } from 'no-redux';
export const actionData = {
artists: {
url: 'http://localhost/api/artists'
}
}
export default generateActions(actionData);
```
**Step 2**
Create a redux store by calling the "createStore" function from "no-redux" with the action data object you defined in step 1. The "createStore" function will generate reducers and middlewares that handle http calls and register them with the store.
```js
import React from 'react';
import { render } from 'react-dom';
import { Provider, createStore } from 'no-redux';
import { actionData } from './actions';
import App from './App';
render(
,
document.getElementById('root')
);
```
**Step 3**
In your component, connect to the store with the action creators you created in step 1. When you call the action creator functions, no-redux will make http requests, get the http response and put the results on the redux store.
```js
import React from 'react';
import { connect } from 'no-redux';
import actions from './actions';
class App extends React.Component {
componentWillMount() {
this.props.getArtists();
}
render() {
return (
{(this.props.artists || []).map(a =>
{a.name}
)}
);
}
}
export default connect(s => ({ artists: s.artists }), actions)(App);
```