Wondering what’s next for npm?Check out our public roadmap! »

    react-redux-await-control
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.5 • Public • Published

    React Redux Await Control

    npm version npm downloads

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

    component.js

    import React, { useEffect } from 'react';
    import { useAwaitControl } from 'react-redux-await-control';
    ...
    import { listTodos } from '../store/action';
    import { getTodos } from '../store/selectors';
    
    export default function Component() {
      const todos = useSelector(getTodos);
    
      const listTodosControl = useAwaitControl(listTodos);
    
      useEffect(() => {
        listTodosControl.start();
        return () => listTodosControl.cancel();
      }, []);
    
      if (listTodosControl.isRunning()) {
        return <Loading />;
      }
    
      return (
        <List>
           {
              todos.map(todo => <Item key={todo.id} data={todo} />)
           }
        </List>
      );
    }
    

    License

    MIT

    Install

    npm i react-redux-await-control

    DownloadsWeekly Downloads

    171

    Version

    0.7.5

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar