Working with redux can be very verbose. React Redux Await Control
intends to help you deal with it.
# If you use npm:
npm i react-redux-await-control
# Or if you use Yarn:
yarn add react-redux-await-control
import { combineReducers } from 'redux';
import AwaitControl from 'react-redux-await-control';
import authReducer from './auth';
import todoReducer from './todo';
const reducers = AwaitControl.init().mix({
authReducer,
todoReducer,
});
export default combineReducers({ ...reducers });
...
import { createAsyncAction } from 'react-redux-await-control';
...
export const removeTodo = createAsyncAction('REMOVE_TODO');
# in this way the information passed by parameters on success or failure is saved.
export const listTodo = createAsyncAction('LIST_TODO', { saveResult: true });
import React, { useEffect } from 'react';
import { useAwaitControl } from 'react-redux-await-control';
...
import { listTodos } from '../store/action';
export default function Component() {
const listTodosControl = useAwaitControl(listTodos);
useEffect(() => {
listTodosControl.start();
return () => listTodosControl.cancel();
}, []);
if (listTodosControl.isRunning()) {
return <Loading />;
}
if (listTodosControl.hasFailure()) {
return <Error />;
}
return (
<List>
{
listTodosControl.result().map(
todo => <Item key={todo.id} data={todo} />
)
}
</List>
);
}
Method | Parameters | Return Type | Description |
---|---|---|---|
init | config?: AwaitControlInitializer | AwaitControl | Initialize the library |
getControl | - | AwaitControl | Get the AwaitControl single object |
mix | reducers: ReducersMapObject | ReducersMapObject | combines the reducers of the project with the reducer that belongs to the library |
Property | Type | Description |
---|---|---|
keyReducer | String | Change the default keyReducer |
Method | Parameters | Return Type | Description |
---|---|---|---|
start | |||
cancel | |||
success | |||
failure | |||
clear |
Property | Type | Description |
---|---|---|
label | ||
rawKey |
Method | Parameters | Return Type | Description |
---|---|---|---|
start | |||
cancel | |||
success | |||
failure | |||
clear | |||
result | |||
isRunning | |||
wasCancelled | |||
hasFailure | |||
isSuccessful |