How to use the easy-peasy.effect function in easy-peasy

To help you get started, we’ve selected a few easy-peasy examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github monsieurBoutte / react-pwa-boilerplate / src / models / auth-model.js View on Github external
checkLocalStorage,
  setInLocalStorage
} from '../util/localstorage-util';

// rehydrate the auth state from localStorage if it exist
export const initialState = checkLocalStorage('auth', {
  token: null,
  isAuthenticated: false
});

export const authModel = {
  auth: {
    ...initialState,
    isAuthLoading: false,
    authError: '',
    authenticateUser: effect(async (dispatch, payload, getState) => {
      try {
        dispatch.auth.updateIsAuthLoading({ loading: true });
        const authResponse = await login(payload);
        dispatch.auth.updateAuth(authResponse);
        dispatch.auth.updateIsAuthLoading({ loading: false });
        history.push('/');
      } catch (error) {
        dispatch.auth.updateIsAuthLoading({ loading: false });
        if (error.response.status === 401) {
          dispatch.auth.updateAuthError({ message: 'invalid credentials' });
        }
        console.group('authenticateUser error');
        console.warn(
          `error caught when authenticating user -> ${JSON.stringify(
            error,
            null,
github monsieurBoutte / react-pwa-boilerplate / src / models / github-joblistings-model.js View on Github external
checkLocalStorage,
  setInLocalStorage
} from '../util/localstorage-util';

// rehydrate the current job selection
// state from localStorage if it exist
const initialState = {
  jobListingsCollection: [],
  jobListingsLoading: false,
  currentJobSelection: checkLocalStorage('currentJobSelection', {})
};

export const githubJobListingsModel = {
  githubJoblistings: {
    ...initialState,
    getJobListings: effect(async (dispatch, payload, getState) => {
      dispatch.githubJoblistings.updateJobListingsLoading(true);
      try {
        const fetchedJobListings = await fetchJobListings(payload);
        dispatch.githubJoblistings.updateJoblistingsCollection(
          fetchedJobListings
        );
      } catch (error) {
        console.error(
          new Date(),
          'error caught when fetching job listings',
          error
        );
      }
    }),
    updateJoblistingsCollection: (state, payload) => {
      /**
github monsieurBoutte / react-pwa-boilerplate / src / models / music-model.js View on Github external
favoriteLyrics: checkLocalStorage('favoriteLyrics', []),
  isLyricsNotFound: false,
  isLyricsLoading: false,
  lyrics: '',
  artist: '',
  song: ''
};

// lift the observable stream into a variable
// so that we can unsubscribe from another functionw within the model
let requestStream;

export const musicModel = {
  music: {
    ...initialState,
    getLyrics: effect(async (dispatch, payload, getState) => {
      const { artist, song } = payload;
      dispatch.music.updateIsLyricsNotFound(false);
      dispatch.music.updateIsLyricsLoading(true);
      dispatch.music.updateCurrentArtist(artist);
      dispatch.music.updateCurrentSong(song);
      requestStream = fetchLyrics$(payload).subscribe({
        next: ({ lyrics }) => dispatch.music.updateCurrentLyrics(lyrics),
        error: data => dispatch.music.updateIsLyricsNotFound(true),
        complete: data => dispatch.music.updateIsLyricsLoading(false)
      });
    }),
    cancelLyricSearch: effect(async (dispatch, payload, getState) => {
      requestStream.unsubscribe();
      dispatch.music.updateIsLyricsLoading(false);
    }),
    addToFavoriteLyrics: (state, payload) => {
github monsieurBoutte / react-pwa-boilerplate / src / models / music-model.js View on Github external
export const musicModel = {
  music: {
    ...initialState,
    getLyrics: effect(async (dispatch, payload, getState) => {
      const { artist, song } = payload;
      dispatch.music.updateIsLyricsNotFound(false);
      dispatch.music.updateIsLyricsLoading(true);
      dispatch.music.updateCurrentArtist(artist);
      dispatch.music.updateCurrentSong(song);
      requestStream = fetchLyrics$(payload).subscribe({
        next: ({ lyrics }) => dispatch.music.updateCurrentLyrics(lyrics),
        error: data => dispatch.music.updateIsLyricsNotFound(true),
        complete: data => dispatch.music.updateIsLyricsLoading(false)
      });
    }),
    cancelLyricSearch: effect(async (dispatch, payload, getState) => {
      requestStream.unsubscribe();
      dispatch.music.updateIsLyricsLoading(false);
    }),
    addToFavoriteLyrics: (state, payload) => {
      let favoriteLyricsWithAddition = [...state.favoriteLyrics, payload];
      /**
       *  https://github.com/ctrlplusb/easy-peasy#installation
       *  🙌 thanks to immer
       *  ..Mutate the state directly. Under the hood we convert this to an
       *  an immutable update in the store, but at least you don't need to
       *  worry about being careful to return new instances etc. This also
       *  makes it 👇 easy to update deeply nested items.
       */
      state.favoriteLyrics = favoriteLyricsWithAddition;
      // store favorite lyrics state offline
      setInLocalStorage('favoriteLyrics', favoriteLyricsWithAddition);