This could help in reducing boilerplate using <a href="https://github.com/erikras/duck

I propose the following <div class="highlight highlight-source-js notranslate posi

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

[Feature] Proposal Redux DUCKS action creaters & action dispatchers helpers about melting-pot HOT 3 OPEN

sakhisheikh commented on June 2, 2024 1

[Feature] Proposal Redux DUCKS action creaters & action dispatchers helpers

from melting-pot.

Comments (3)

adeelibr commented on June 2, 2024

I really like the idea about having action creators and other redux utils in Melting-Pot, what API do you propose we should have for this?

from melting-pot.

adeelibr commented on June 2, 2024

I propose the following

actionCreate = (prefix = '', action) => {
   // e.g, prefix = 'user', action = 'profile'
   const action = `${prefix}/action`; 
   const types = {
       INIT: 'init/',
       LOADING: 'loading/',
       SUCCESS: 'success/',
       ERROR: 'error/',  
   };
   return Object.values(types).map(type => `${type}/action`.toUpperCase());
}

actionDispatcher = fetch => async dispatch {
    const [init, loading, success, error] = actionCreate('user', 'get_profile');
    try {
       dispatch({ type: init }) // init is => INIT/USER/GET_PROFILE
       dispatch({ type: loading }); // loading is=> LOADING/USER/GET_PROFILE
       const payload = await fetch();
       dispatch({ type: success, payload })  // success=> SUCCESS/USER/GET_PROFILE
       return payload;
    } catch (error) {
       dispatch({ type: error}) // error is => ERROR/USER/GET_PROFILE
       throw error;
    }
}

Then use it something like this;

const myFooApiCall = async () => {
     try {
         const result = await fetch('http://some-api-call', {
              method: '',
              headers: {},
          });
          return result;
       } catch (error) {
          throw error;
       }
}

// use it like this
dispatch(actionDispatcher(myFooApiCall))