React + IndexDb + автообновление = почти AsyncRedux

import React, { PureComponent } from 'react';
import Button from 'react-bootstrap/Button';
import counter from 'common/counter';
import Form from 'react-bootstrap/Form';
import Table from 'react-bootstrap/Table';

export default class Step0 extends PureComponent {

  constructor() {
    super( ...arguments );

    this.state = {
      newTaskText: '',
      tasks: [
        { id: counter(), text: 'Sample task' },
      ],
    };

    this.handleAdd = () => {
      this.setState( state => ( {
        tasks: [ ...state.tasks, { id: counter(), text: state.newTaskText } ],
        newTaskText: '',
      } ) );
    };
    this.handleDeleteF = idToDelete => () => this.setState( state => ( {
      tasks: state.tasks.filter( ( { id } ) => id !== idToDelete ),
    } ) );
    this.handleNewTaskTextChange = ( { target: { value } } ) => this.setState( {
      newTaskText: value || '',
    } );
  }

  render() {
    return <Table bordered hover striped>
      <thead><tr>
        <th>#</th><th>Text</th><th />
      </tr></thead>
      <tbody>
        { this.state.tasks.map( task => <tr key={task.id}>
          <td>{task.id}</td>
          <td>{task.text}</td>
          <td><Button
            onClick={this.handleDeleteF( task.id )}
            type="button"
            variant="danger">Удалить</Button></td>
        </tr> ) }
        <tr key="+1">
          <td />
          <td><Form.Control
            onChange={this.handleNewTaskTextChange}
            placeholder="Текст новой задачи"
            type="text"
            value={this.state.newTaskText || ''} /></td>
          <td><Button
            onClick={this.handleAdd}
            type="button"
            variant="primary">Добавить</Button></td>
        </tr>
      </tbody>
    </Table>;
  }

}

import React, { PureComponent } from 'react';
import counter from 'common/counter';
import TaskList from '../common/TaskList';

export default class Step01 extends PureComponent {

  constructor() {
    super( ...arguments );
    this.state = { tasks: [
      { id: counter(), text: 'Sample task' },
    ] };

    this.handleAdd = newTaskText => {
      this.setState( state => ( {
        tasks: [ ...state.tasks, { id: counter(), text: newTaskText } ],
      } ) );
    };
    this.handleDelete = idToDelete => this.setState( state => ( {
      tasks: state.tasks.filter( ( { id } ) => id !== idToDelete ),
    } ) );
  }

  render() {
    return <>
      <h1>Вариант с хранением списка задач в компоненте</h1>
      <h2>Обработка списка задач и отображение в разных компонентах</h2>
      <TaskList
        onAdd={this.handleAdd}
        onDelete={this.handleDelete}
        tasks={this.state.tasks} />
    </>;
  }

}

import React, { PureComponent } from 'react';
import Button from './AutoDisableButtonWithSpinner';
import Form from 'react-bootstrap/Form';
import Table from 'react-bootstrap/Table';

export default class TaskList extends PureComponent {

  constructor() {
    super( ...arguments );

    this.state = {
      newTaskAdding: false,
      newTaskText: '',
    };

    this.handleAdd = async() => {
      this.setState( { newTaskAdding: true } );
      try {
        // сначала ждём добавления, только потом очищаем поле
        await this.props.onAdd( this.state.newTaskText );
        this.setState( { newTaskText: '' } );
      } finally {
        this.setState( { newTaskAdding: false } );
      }
    };

    this.handleDeleteF = idToDelete =>
      async() => await this.props.onDelete( idToDelete );

    this.handleNewTaskTextChange = ( { target: { value } } ) => this.setState( {
      newTaskText: value || '',
    } );
  }

  render() {
    return <Table bordered hover striped>
      <thead><tr>
        <th>#</th><th>Text</th><th />
      </tr></thead>
      <tbody>
        { this.props.tasks.map( task => <tr key={task.id}>
          <td>{task.id}</td>
          <td>{task.text}</td>
          <td><Button
            onClick={this.handleDeleteF( task.id )}
            type="button"
            variant="danger">Удалить</Button></td>
        </tr> ) }
        <tr key="+1">
          <td />
          <td><Form.Control
            disabled={this.state.newTaskAdding}
            onChange={this.handleNewTaskTextChange}
            placeholder="Текст новой задачи"
            type="text"
            value={this.state.newTaskText || ''} /></td>
          <td><Button
            onClick={this.handleAdd}
            type="button"
            variant="primary">Добавить</Button></td>
        </tr>
      </tbody>
    </Table>;
  }

}

function openDatabasePromise( keyPath ) {
  return new Promise( ( resolve, reject ) => {
    const dbOpenRequest = window.indexedDB.open( DB_NAME, '1.0.0' );

    dbOpenRequest.onblocked = () => {
      reject( 'Требуется обновление структуры базы данных, хранимой в вашем браузере, ' +
        'но браузер уведомил о блокировке базы данных.' );
    };

    dbOpenRequest.onerror = err => {
      console.log( 'Unable to open indexedDB ' + DB_NAME );
      console.log( err );
      reject( 'Невозможно открыть базу данных, либо при её открытии произошла неисправимая ошибка.' +
       ( err.message ? 'Техническая информация: ' + err.message : '' ) );
    };

    dbOpenRequest.onupgradeneeded = event => {
      const db = event.target.result;
      try {
        db.deleteObjectStore( OBJECT_STORE_NAME );
      } catch ( err ) { console.log( err ); }
      db.createObjectStore( OBJECT_STORE_NAME, { keyPath } );
    };

    dbOpenRequest.onsuccess = () => {
      console.info( 'Successfully open indexedDB connection to ' + DB_NAME );
      resolve( dbOpenRequest.result );
    };

    dbOpenRequest.onerror = reject;
  } );
}

// Оборачиваем функции от ObjectStore, поддерживающие интерфейс IDBRequest
// в вызов с использованием Promise
function wrap( methodName ) {
  return function() {
    const [ objectStore, ...etc ] = arguments;
    return new Promise( ( resolve, reject ) => {
      const request = objectStore[ methodName ]( ...etc );
      request.onsuccess = () => resolve( request.result );
      request.onerror = reject;
    } );
  };
}
const deletePromise = wrap( 'delete' );
const getAllPromise = wrap( 'getAll' );
const getPromise = wrap( 'get' );
const putPromise = wrap( 'put' );
}

const DB_NAME = 'objectStore';
const OBJECT_STORE_NAME = 'objectStore';
/* ... */
export default class IndexedDbRepository {
  /* ... */
  constructor( keyPath ) {
    this.error = null;
    this.keyPath = keyPath;

    // конструктор нельзя объявить как async
    // поэтому вынесено в отдельную функцию
    this.openDatabasePromise = this._openDatabase();
  }

  async _openDatabase( keyPath ) {
    try {
      this.dbConnection = await openDatabasePromise( keyPath );
    } catch ( error ) {
      this.error = error;
      throw error;
    }
  }

  async _tx( txMode, callback ) {
    await this.openDatabasePromise; // await db connection
    const transaction = this.dbConnection.transaction( [ OBJECT_STORE_NAME ], txMode );
    const objectStore = transaction.objectStore( OBJECT_STORE_NAME );
    return await callback( objectStore );
  }

  async findAll() {
    return this._tx( 'readonly', objectStore => getAllPromise( objectStore ) );
  }

  async findById( key ) {
    return this._tx( 'readonly', objectStore => getPromise( objectStore, key ) );
  }

  async deleteById( key ) {
    return this._tx( 'readwrite', objectStore => deletePromise( objectStore, key ) );
  }

  async save( item ) {
    return this._tx( 'readwrite', objectStore => putPromise( objectStore, item ) );
  }
}

import IndexedDbRepository from './IndexedDbRepository';
import { PureComponent } from 'react';

export default class RepositoryListener extends PureComponent {

  constructor() {
    super( ...arguments );

    this.prevRepository = null;
    this.repositoryListener = repositoryStamp => this.props.onChange( repositoryStamp );
  }

  componentDidMount() {
    this.subscribe();
  }

  componentDidUpdate() {
    this.subscribe();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  subscribe() {
    const { repository } = this.props;
    if ( repository instanceof IndexedDbRepository && this.prevRepository !== repository ) {
      if ( this.prevRepository !== null ) {
        this.prevRepository.removeListener( this.repositoryListener );
      }
      this.prevRepository = repository;
      repository.addListener( this.repositoryListener );
    }
  }

  unsubscribe( ) {
    if ( this.prevRepository !== null ) {
      this.prevRepository.removeListener( this.repositoryListener );
      this.prevRepository = null;
    }
  }

  render() {
    return this.props.children || null;
  }
}

import { PureComponent } from 'react';

export default class PromiseComponent extends PureComponent {

  constructor() {
    super( ...arguments );
    this.state = {
      error: null,
      value: null,
    };
    this.prevPromise = null;
  }

  componentDidMount() {
    this.subscribe();
  }

  componentDidUpdate( ) {
    this.subscribe();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  subscribe() {
    const { cleanOnPromiseChange, promise } = this.props;
    if ( promise instanceof Promise && this.prevPromise !== promise ) {
      if ( cleanOnPromiseChange ) this.setState( { error: null, value: null } );
      this.prevPromise = promise;
      promise.then( value => {
        if ( this.prevPromise === promise ) {
          this.setState( { error: null, value } );
        }
      } )
        .catch( error => {
          if ( this.prevPromise === promise ) {
            this.setState( { error, value: null } );
          }
        } );
    }
  }

  unsubscribe( ) {
    if ( this.prevPromise !== null ) {
      this.prevPromise = null;
    }
  }

  render() {
    const { children, fallback } = this.props;
    const { error, value } = this.state;

    if ( error !== null ) {
      throw error;
    }
    if ( value === undefined || value === null ) {
      return fallback || null;
    }
    return children( value );

  }
}

import repository from './RepositoryHolder';
/* ... */

class Connected extends PureComponent {

  constructor() {
    super( ...arguments );
    this.handleRepoChanged = () => this.forceUpdate();
  }

  render() {
    const { childClass, childProps, mapRepoToProps, mapRepoToActions } = this.props;
    const promises = mapRepoToProps( repository, childProps );
    const actions = mapRepoToActions( repository, childProps );

    return <RepositoryListener onChange={this.handleRepoChanged} repository={repository}>
      <PromisesComponent promises={promises}>
        { values => React.createElement( childClass, {
          ...childProps,
          ...values,
          ...actions,
        } )}
      </PromisesComponent>
    </RepositoryListener>;
  }
}

export default function connect( mapRepoToProps, mapRepoToActions ) {
  return childClass => props => <Connected
    childClass={childClass}
    childProps={props}
    mapRepoToActions={mapRepoToActions}
    mapRepoToProps={mapRepoToProps} />;
}