Optimistic UI

One of a failure of event based implementation of Flux is to handle optimistic UI.

Optimisit UI is making local changes on the assumption that a remote operation will succeed.

In event based implementation you must create an event for the action and an event for the success. To implement Optimistic UI you need to create another event in case of failure.

http://redux.js.org/docs/advanced/AsyncActions.html

Usually, for any API request you’ll want to dispatch at least three different kinds of actions:

• An action informing the reducers that the request began.

The reducers may handle this action by toggling an isFetching flag in the state. This way the UI knows it’s time to show a spinner.

• An action informing the reducers that the request finished successfully.

The reducers may handle this action by merging the new data into the state they manage and resetting isFetching. The UI would hide the spinner, and display the fetched data.

• An action informing the reducers that the request failed.

The reducers may handle this action by resetting isFetching. Additionally, some reducers may want to store the error message so the UI can display it.

In Sinux, because Store signal are Promise you may simply use then and catch

  // somewhere in my container
  onUserAction(args) {
    const prevState = {...this.state};
    store.signal(args).catch((error) => {
      // the store state is not modified when an error occured
      // so rollback using prevState and display error;
      this.setState(prevState);
    });

    this.setState({...prevState, myOptimisticChange: args});
  }