FredericHeem / Redux Act Async
Licence: apache-2.0
Reduce boilerplate for redux async actions and reducers
Stars: ✭ 127
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Redux Act Async
Madelineproto
Async PHP client/server API for the telegram MTProto protocol
Stars: ✭ 1,776 (+1298.43%)
Mutual labels: async
Advanced Vertx Guide
A gentle guide for advanced Vert.x users
Stars: ✭ 118 (-7.09%)
Mutual labels: async
Active Status
Present status of mulitple 'jobs' in a command line tool, using terminal capability codes
Stars: ✭ 120 (-5.51%)
Mutual labels: async
Async Backplane
Simple, Erlang-inspired fault-tolerance framework for Rust Futures.
Stars: ✭ 113 (-11.02%)
Mutual labels: async
Mioco
[no longer maintained] Scalable, coroutine-based, fibers/green-threads for Rust. (aka MIO COroutines).
Stars: ✭ 125 (-1.57%)
Mutual labels: async
Cassandra Sharp
high performance .NET driver for Apache Cassandra
Stars: ✭ 114 (-10.24%)
Mutual labels: async
Drone
CLI utility for Drone, an Embedded Operating System.
Stars: ✭ 114 (-10.24%)
Mutual labels: async
Jdeferred
Java Deferred/Promise library similar to JQuery.
Stars: ✭ 1,483 (+1067.72%)
Mutual labels: async
Tornadis
async minimal redis client for tornado ioloop designed for performances (use C hiredis parser)
Stars: ✭ 126 (-0.79%)
Mutual labels: async
Tina
Tina is a teeny tiny, header only, coroutine and job library.
Stars: ✭ 125 (-1.57%)
Mutual labels: async
Socket
Non-blocking socket and TLS functionality for PHP based on Amp.
Stars: ✭ 122 (-3.94%)
Mutual labels: async
redux-act-async
Create async actions and reducers based on redux-act
Install
npm install redux-act-async --save
Badges
Usage
import thunk from 'redux-thunk'
import {createStore, applyMiddleware} from 'redux';
import {createActionAsync, createReducerAsync} from 'redux-act-async';
// The async api to call, must be a function that returns a promise
let user = {id: 8};
function apiOk(){
return Promise.resolve(user);
}
// createActionAsync will create 4 synchronous action creators:
// login.request, login.ok, login.error and login.reset
const login = createActionAsync('LOGIN', apiOk);
/*
createReducerAsync takes an async action created by createActionAsync.
It reduces the following state given the four actions: request, ok, error and reset.
const defaultsState = {
loading: false,
request: null,
data: null,
error: null
};
if you need to overwrite the defaultsState just insert your initialState as a second paramenter in the createReducerAsync function. Just like that:
const initialState = {
loading: false,
request: null,
data: {custom: "intitial data"},
error: null
};
const reducer = createReducerAsync(login, initialState)
*/
const reducer = createReducerAsync(login)
const store = createStore(reducer, applyMiddleware(thunk));
await store.dispatch(login({username:'lolo', password: 'password'}));
Legacy redux
In a nutshell, the following code:
const options = {noRethrow: false};
const loginAction = createActionAsync('LOGIN', api, options);
const loginReducer = createReducerAsync(loginAction)
is equivalent to:
const LOGIN_REQUEST = 'LOGIN_REQUEST'
const LOGIN_OK = 'LOGIN_OK'
const LOGIN_ERROR = 'LOGIN_ERROR'
const LOGIN_RESET = 'LOGIN_RESET'
const loginRequest = (value) => ({
type: LOGIN_REQUEST,
payload: value
})
const loginOk = (value) => ({
type: LOGIN_OK,
payload: value
})
const loginError = (value) => ({
type: LOGIN_ERROR,
payload: value
})
const loginReset = (value) => ({
type: LOGIN_RESET,
payload: value
})
const options = {noRethrow: true};
export const login = (...args) => {
return (dispatch, getState) => {
dispatch(loginRequest(...args));
return api(...args, dispatch, getState)
.then(response => {
const out = {
request: args,
response: response
}
dispatch(loginOk(out))
return out;
})
.catch(error => {
const errorOut = {
actionAsync,
request: args,
error: error
}
dispatch(loginError(errorOut))
if(!options.noRethrow) throw errorOut;
})
}
}
const defaultsState = {
loading: false,
request: null,
data: null,
error: null
};
const reducer = createReducer({
[actionAsync.request]: (state, payload) => ({
...state,
request: payload,
loading: true,
data: null,
error: null
}),
[actionAsync.ok]: (state, payload) => ({
...state,
loading: false,
data: payload.response
}),
[actionAsync.error]: (state, payload) => ({
...state,
loading: false,
error: payload.error
}),
[actionAsync.reset]: () => (defaultsState)
} , defaultsState);
That's 3 lines against 78 lines, a good way to reduce boilerplate code.
Async Action Options
Here are all the options to configure an asynchronous action:
const actionOptions = {
noRethrow: false,
request:{
callback: (dispatch, getState, ...args) => {
},
payloadReducer: (payload) => {
return payload
},
metaReducer: (meta) => {
return ASYNC_META.REQUEST
}
},
ok:{
callback: (dispatch, getState, ...args) => {
},
payloadReducer: (payload) => {
return payload
},
metaReducer: () => {
return ASYNC_META.OK
}
},
error:{
callback: (dispatch, getState, ...args) => {
},
payloadReducer: (payload) => {
return payload
},
metaReducer: () => {
return ASYNC_META.ERROR
}
}
}
const loginAction = createActionAsync('LOGIN', api, actionOptions);
Who is using this library ?
This library has been extracted originally from starhack.it, a React/Node Full Stack Starter Kit.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].