Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sakhisheikh opened this issue Feb 4, 2019 · 3 comments
Labels
feature A new feature

Comments

@sakhisheikh
Copy link

sakhisheikh commented Feb 4, 2019

This could help in reducing boilerplate using DUCKS while writing actions and reducers. Use would need to include respective creators utils for constants, actions and reducers. Hence it will help in writing much cleaner code and fast development.

@adeelibr
Copy link
Member

adeelibr commented Feb 4, 2019

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?

@adeelibr
Copy link
Member

adeelibr commented Feb 4, 2019

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

What do you think? @sakhisheikh

So we end up with 2 utils,

  • actionCreate
  • actionDispatcher

@adeelibr adeelibr added the feature A new feature label Feb 4, 2019
@adeelibr adeelibr changed the title [Feature] Proposal to add a new section redux utils [Feature] Proposal Redux DUCKS action creaters & action dispatchers helpers Feb 4, 2019
@adeelibr
Copy link
Member

adeelibr commented Feb 7, 2019

@sakhisheikh are you going to be working on this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature
Projects
None yet
Development

No branches or pull requests

2 participants