react-redux-gen v0.1.6
NPM
You can find this package on NPM
Install
Yarn:
yarn react-redux-gen
NPM:
npm install react-redux-gen
react-redux-gen
Redux-gen will generate actions, thunk and reducers in one line using naming conventions and API based.
You can use fully if you have an standard object CRUD, like an User, or use the plain actions and extend with your async actions.
This is based on Redux. If this is too advanced for you, and you need to know more in how to use redux, please check the guides: https://redux.js.org/recipes/reducing-boilerplate
Purpose
Redux Gen generate actions and reducers based on convention, and there's many use cases to use the way you want
Why?
As the application increase, the process of create actions and reducers is pretty repetitive and we can get a lot of benefits if we use the same language that API REST naming conventions if we are connecting on an API.
Methods
You can use these three utility functions from react-redux-gen:
import { genActionNames, genPlainActions, genAsyncActions } from 'react-redux-gen'
genActionNames
Returns the action names in a object so you can use to be referecend later, like on reducers
genActionNames(entity, types, states)
Parameter | Type | Description | Default |
---|---|---|---|
entity | String | The entity name | There's no default for this one |
types | Array | Types of action | Array('create', 'update', 'delete', 'list', 'fetch') |
states | Array | States of request | Array('REQUESTED', 'SUCCESS', 'ERROR') |
genPlainActions
Returns the action functions in a friendly way to be used to dispatch actions
genPlainActions(entity, types, states)
Parameter | Type | Description | Default |
---|---|---|---|
entity | String | The entity name | There's no default for this one |
types | Array | Types of action | Array('create', 'update', 'delete', 'list', 'fetch') |
states | Array | States of request | Array('REQUESTED', 'SUCCESS', 'ERROR') |
For REQUESTED
state, it will return the following action object:
{ type: 'ENTITY_TYPE_REQUESTED', completed: false, error: false }
For SUCCESS
state, it will return the following action object:
{ type: 'ENTITY_TYPE_SUCCESS', completed: true, data: data, error: false }
For ERROR
state, it will return the following action object:
{ type: 'ENTITY_TYPE_ERROR', completed: true, error: error }
genAsyncActions
Returns the async action standard function to communicate with rest API. These functions make calls to api's based on the base URL, dispatching request action, success when succeed, and error when the the call to the api fails. We use axios to make our calls.
genAsyncActions(entity, url, headers, types, states)
Parameter | Type | Description | Default |
---|---|---|---|
entity | String | The entity name | There's no default for this one |
url | String | The base url to call | There's no default for this one |
headers | Object | Extra headers | There's no default for this one |
types | Array | Types of action | Array('create', 'update', 'delete', 'list', 'fetch') |
states | Array | States of request | Array('REQUESTED', 'SUCCESS', 'ERROR') |
Example
This is a basic example to use to define the CRUD actions for your user
object
import { genPlainActions, genAsyncActions } from 'react-redux-gen'
const userActions = genPlainActions('user')
const userAsyncActions = genAsyncActions('user', '/users)
export { userActions, userAsyncActions }
This code above will generate the actions needed with states REQUESTED
, SUCCESS
and ERROR
for actions and the async actions with the basic calls from these states.
This will generate the following actions object:
{
'create': ['CREATE_USER_REQUESTED', 'CREATE_USER_SUCCESS', 'CREATE_USER_ERROR'],
'update': ['UPDATE_USER_REQUESTED', 'UPDATE_USER_SUCCESS', 'UPDATE_USER_ERROR'],
'delete': ['DELETE_USER_REQUESTED', 'DELETE_USER_SUCCESS', 'DELETE_USER_ERROR'],
'list': ['LIST_USER_REQUESTED', 'LIST_USER_SUCCESS', 'LIST_USER_ERROR'],
'fetch': ['FETCH_USER_REQUESTED', 'FETCH_USER_SUCCESS', 'FETCH_USER_ERROR'],
}
And the following async actions from a base url
Our generated async actions is like this:
import axios from 'axios'
import { genPlainActions, genActionNames } from 'react-redux-gen'
const actions = genPlainActions('user', '/authenticated', ['action'])
// [0] => REQUESTED, [1] => SUCCESS, [2] => ERROR
const example = () => {
return dispatch => {
dispatch(actions.action[0]())
return axios
.get('/authenticated')
.then( response => {
return dispatch(actions.action[1](response.data))
}).catch( e => {
return dispatch(actions.action[2](e))
})
}
}
Important NOTE!
The async actions is still experimental and we don't support much customization for these case, and we hope to improve this for new releases.
How to use
With the async object is possible to dispatch actions from this call, for example:
genAsyncActions('user', 'http://example.com/user/')['create']({name: 'jonh doe'})
Will dispatch
{ type: 'CREATE_USER_REQUESTED', completed: false }
, { type: 'CREATE_USER_SUCCESS', error: false, completed: true, data: {name: 'John doe'} }
,
and for an error on create:
will generate { type: 'CREATE_USER_REQUESTED', completed: false }
, { type: 'CREATE_USER_ERROR', error: {}, completed: true }
If you want to pass headers to axios, you should run like this example:
import { genPlainActions, genAsyncActions } from 'react-redux-gen'
const headers = {
'Authorization': `Basic ${process.env.REACT_APP_SECRET}`,
'Content-Type': 'application/json'
}
const userActions = genPlainActions('user')
const userAsyncActions = genAsyncActions('user', '/users', headers)
export { userActions, userAsyncActions }
And for reducers
import { genReducer } from 'react-redux-gen'
const user = genReducer('user', { data: {}, error: false, completed: true }) // the object and initial state
export default user
Custom examples
If you want to use just the actions and use your own async actions, feel free to do like the example below for a login action:
import { genPlainActions, genActionNames } from 'react-redux-gen'
import { host } from '../url'
import Auth from '../modules/Auth'
const headers = {
'Authorization': `Bearer ${Auth.getToken()}`,
'Content-Type': 'application/json'
}
const loginActionNames = genActionNames('user', ['logged', 'login', 'logout'])
const loginActions = genPlainActions('user',['logged', 'login', 'logout', 'register'])
const logged = () => {
return dispatch => {
dispatch(loginActions.logged[0]())
return axios
.get(host + '/authenticated', { headers: {
'Authorization': `Bearer ${Auth.getToken()}`,
'Content-Type': 'application/json'
}
})
.then( response => {
return dispatch(loginActions.logged[1](response.data))
}).catch( e => {
return dispatch(loginActions.logged[2](e))
})
}
}
const login = (user) => {
return dispatch => {
dispatch(loginActions.login[0]())
return axios
.post(host + '/authorize/local', user)
.then( response => {
return dispatch(loginActions.login[1](response.data))
}).catch( e => {
return dispatch(loginActions.login[2](e))
})
}
}
const logout = () => {
return (dispatch) => {
dispatch(loginActions.logout[0]())
if(Auth.deauthenticateUser()) {
return dispatch(loginActions.logout[1]({}))
}
return dispatch(loginActions.logout[2](new Error('we have an error to logout, try again later')))
}
}
const register = (user) => {
return dispatch => {
dispatch(loginActions.register[0]())
return axios
.post(host + '/auth/register', user)
.then( response => {
return dispatch(loginActions.register[1](response.data))
}).catch( e => {
return dispatch(loginActions.register[2](e))
})
}
}
export { loginActionNames, loginActions, logged, login, logout, register }
Reducer
For a login reducer, we could use
import {
loginActionNames
} from '../actions/login'
const login = (state = { completed: true, data: {}, error: false }, action) => {
switch (action.type) {
case loginActionNames.logged[0]:
return { ...state, completed: action.completed }
case loginActionNames.logged[1]:
return { ...state, completed: action.completed, data: action.data, error: false }
case loginActionNames.logged[2]:
return { ...state, completed: action.completed, error: action.error }
case loginActionNames.logout[0]:
return { ...state, completed: action.completed, error: action.error }
case loginActionNames.logout[1]:
return { ...state, completed: action.completed, error: action.error, data: action.data }
case loginActionNames.logout[2]:
return { ...state, completed: action.completed, error: action.error }
default:
return state
}
}
export default login
Where is used
Ahorta - https://ahorta.io
You can check our actions and reducers from a project using react-redux-gen
See full example on a real project
Contribute
Run the first time
yarn install
Run the project
yarn start
Run the tests
yarn test
Contributors
This package is maintained by Alexandre Magno
License
This open source library is licensed under MIT