react-redux-await-control

Helping to control the state of async actions flux.

Usage no npm install needed!

<script type="module">
  import reactReduxAwaitControl from 'https://cdn.skypack.dev/react-redux-await-control';
</script>

README

React Redux Await Control

npm version npm downloads

Working with redux can be very verbose. React Redux Await Control intends to help you deal with it.

Installation

# If you use npm:
npm i react-redux-await-control

# Or if you use Yarn:
yarn add react-redux-await-control

Usage

reducers.js

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 });

action.js

...
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 });

component.js

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>
  );
}

API Reference

AwaitControl

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

AwaitControlInitializer

Property Type Description
keyReducer String Change the default keyReducer

AsyncActionControl

Method Parameters Return Type Description
start
cancel
success
failure
clear
Property Type Description
label
rawKey

AwaitControlHook

Method Parameters Return Type Description
start
cancel
success
failure
clear
result
isRunning
wasCancelled
hasFailure
isSuccessful

License

MIT