Advanced-DispatchPromises.md

🏠 Home 🏠 Advanced

Advanced - Dispatch Promises

const actions = {
  ADD_TODO: 'ADD_TODO',             // payload: ITodo
  REMOVE_TODO: 'REMOVE_TODO',       // payload: string (the id of a todo)
  SAVE_TODOS: 'SAVE_TODOS',         // payload: ISaveTodosPayload
};

interface ITodoAppState {
  logged: boolean,
  todos: ITodo[];
}

interface ITodo {
  id: string;
  label: string;
  done: boolean;
}

interface ISaveTodosPayload {
  resolve: () => void;
  reject: (error: any) => void;
}

const createTodoAppStore = () => {
  const store = createStore<ITodoAppState>({
    initialState: {
      logged: false,
      todos: [],
    },
    reducers: {
      [actions.ADD_TODO]: ({state: {todos}, payload}) => {
        return {
          todos: todos.concat(payload),
        };
      },
      [actions.REMOVE_TODO]: ({state: {todos}, payload: todoId}) => {
        return {
          todos: todos.filter(todo => todo.id !== todoId),
        };
      },
      [actions.SAVE_TODOS]: ({state: {todos}, payload, dispatch}) => {
        const {resolve, reject}: ISaveTodosPayload = payload;
        saveTodos(todos)  // <-- Your async api method
          .then(resolve)  // call the callback resolve
          .catch(reject); // call the callback reject in case of error
      },
    },
  });

  return {
    get state() { return store.state; },
    
    addTodo: (todo: ITodo) => store.dispatch<ITodo>(actions.ADD_TODO, todo),
    
    removeTodo: (todoId: string) => store.dispatch<string>(actions.REMOVE_TODO, todoId),
    
    saveTodos: (): Promise<void> => {
      return new Promise<void>((resolve, reject) => {
        store.dispatch<ISaveTodosPayload>(
          actions.SAVE_TODOS,
          {resolve, reject},  // this the payload of dispatch, just pass the Promise's callbacks
        );
      });
    },
    
  };
};

What is new here:

• The payload of the SAVE_TODOS actions has two callbacks
• In the reducer we use the network async method saveTodos, where is a promise in this case.
• In the reducer, we call the payload's resolve or thereject callbacks.
• In the return of the createTodoAppStore, we expose the method saveTodos where returns a promise!
• Inside the saveTodos we simply transform the resolve/reject callbacks to fulfill the Promise.

🏠 Advanced

Read more

• FAQ Frequently asked questions
• React How to use it in react
• Examples Live examples. Examples compared to redux's implementations
• Typescript Tips for Typescript implementations
• Terminology Terminology of dynadux, (is small!)
• History, Undo/Redo Middleware for History, Undo/Redo and Restore Points
• React Dynadux Provider for Dynadux App Stores
• Change Log Changes of Dynadux per semver version
• 🏠 Home, Contents