All you need to do is to define the action data and call the generated action creators.
export const actionData = {
artists: {
url: 'http://localhost/api/artists'
},
artist: {
url: 'http://localhost/api/artist/{id}'
},
rate: {
url: 'http://localhost/api/updaterate',
method: 'post',
path: 'artists[id={artistId}].albums[id={albumId}].rate'
},
//...
}
//...
export default generateActions(actionData);// call web api and put the http response on the store under 'artists'
this.props.getArtists();
// set the 'artists' to null on the store
this.props.setArtists();
// with parameters
this.props.getArtist({ id: 5 });
// call web api with body and put the body on the store under the path
this.props.postRate(99, {
artistId: 5,
albumId: 3
});export const actionData = {
artists: {
url: 'http://localhost/api/artists',
methods: ['get', 'post']
},
artist: {
url: 'http://localhost/api/artist/{id}',
methods: ['put', 'patch', 'delete'],
path: 'artist[id]'
},
//...
}
//...
export default generateActions(actionData);this.props.getArtists();
// add new item to array
this.props.postArtists({ id: 7, name: 'Elton John' });
// replace item in array
this.props.putArtist(
{ id: 5, name: 'MJ', albums: [] },
{ id: 5 }
);
// modify item in array
this.props.patchArtist(
{ name: 'MJ' },
{ id: 5 }
);
// remove item from array
this.props.deleteArtist({ id: 5 });import React from 'react';
import { render } from 'react-dom';
import { Provider, createStore } from 'no-redux';
import { actionData } from './actions';
import App from './App';
render(
<Provider store={createStore(actionData)}>
<App />
</Provider>,
document.getElementById('root')
);import { connect } from 'no-redux';
import actions from './actions';
//...
export default connect(selector, actions)(App);export const actionData = {
artists: {
url: 'http://localhost/api/artists'
}
}
// in the component...
render(
<div>
<Button
disabled={this.props.isLoading === true}
onClick={() => this.props.getArtists()}
>
Load Artists
</Button>
<Button onClick={() => this.props.setArtists()}>
Clear Artists
</Button>
//...
</div>
)Url with parameters
export const actionData = {
artist: {
url: 'http://localhost/api/artists/{id}'
}
}
// in the component...
render(
<div>
<Button onClick={() => this.props.getArtist({ id: 5 })}>
Load Artist
</Button>
<Button onClick={() => this.props.setArtist()}>
Clear Artist
</Button>
//...
</div>
)Add new item to an array
export const actionData = {
//...
newArtist: {
url: 'http://localhost/api/newartist',
method: 'post',
path: 'artists[]'
}
}
// in the component...
render(
<div>
<Button onClick={() => this.props.postNewArtist({
id: this.getNewId(),
name: this.refs.name.value
})}>
Add Artist
</Button>
//...
</div>
)Delete item from an array
export const actionData = {
//...
artist: {
url: api + 'artist/{id}',
methods: ['put', 'patch', 'delete'],
path: 'artists[id]'
}
}
// in the component...
render(
<div>
<Button onClick={() => this.props.deleteArtist({ id: 5 })}>
Delete id=5
</Button>
//...
</div>
)Todo list with restful API
export const actionData = {
todos: {
url: api + 'todos',
methods: ['get', 'post']
},
todo: {
url: api + 'todos/{id}',
methods: ['put', 'patch', 'delete'],
path: 'todos[id]',
},
todoName: {
path: 'todos[id].name',
},
newTodo: {},
filter: {}
}