react-redux-await-control v0.15.3

React Redux Await Control

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

AwaitControlInitializer

AsyncActionControl

AwaitControlHook

License

MIT