How to use redux-act - 10 common examples

// Decides whether or not to show the Congrats message
    // Set to true after all stages are done
    congratsMessage: boolean
}

const defState = {
    annotationStage: '',
    powerSearchStage: '',
    taggingStage: '',
    backupStage: '',
    showOnboardingBox: false,
    congratsMessage: false,
}

const reducer = createReducer({}, defState)

reducer.on(actions.setAnnotationStage, (state, payload) => ({
    ...state,
    annotationStage: payload,
}))

reducer.on(actions.setPowerSearchStage, (state, payload) => ({
    ...state,
    powerSearchStage: payload,
}))

reducer.on(actions.setTaggingStage, (state, payload) => ({
    ...state,
    taggingStage: payload,
}))

import { createActionDescription } from 'src/redux/utils';
import { v1 as uuid } from 'uuid';
import { delay } from 'redux-saga';
import { ToastMessage } from 'src/redux/models';
import { Toast } from 'models';

// ACTIONS

const actionDescription = createActionDescription('toast');

export const actions = {
  showMessage: createAction(actionDescription('SHOW_MESSAGE')),

  // INTERNAL
  addToast: createAction(actionDescription('SHOW_TOAST')),
  hideToast: createAction(actionDescription('HIDE_TOAST')),
  removeToast: createAction(actionDescription('REMOVE_TOAST')),
  showToast: createAction(actionDescription('SHOW_TOAST')),
};

// STATE

const initialState = {
  toast: null as Toast,
};

export type ToastState = typeof initialState;

// REDUCER

const toast = createReducer({}, initialState.toast)
  .on(actions.addToast, (_, toast) => toast)

: [...state.results, ...payload.docs]

    const annotsByDay =
        payload.annotsByDay && overwrite
            ? payload.annotsByDay
            : { ...state.annotsByDay, ...payload.annotsByDay }

    return {
        ...state,
        ...commonState,
        results,
        annotsByDay,
    }
}

const reducer = createReducer({}, defState)

reducer.on(acts.setShowOnboardingMessage, (state, showOnboardingMessage) => ({
    ...state,
    showOnboardingMessage,
}))

reducer.on(acts.addTag, (state, { tag, index }) => {
    const doc = state.results[index]

    return {
        ...state,
        results: [
            ...state.results.slice(0, index),
            {
                ...doc,
                tags: [...doc.tags, tag],

}

const initialState: ContactsState = {
  groupClaimsBy: null,
  roomForSharing: null,
  editing: null,
  newClaimType: null,
  newClaimValue: null,
  selectedContact: null,
  list: Config.contacts.defaultList,
  claims: Config.contacts.defaultClaimsList,
  matrixClaims: [],
  hiddenDataSources: [],
}

export const reducer = createReducer({}, initialState)
reducer.on(resetToInitialState, (state: ContactsState) => {
  return initialState
})

export const toggleHiddenDataSource = createAction('Toggle hidden datasource')
reducer.on(toggleHiddenDataSource, (state: ContactsState, payload?: DataSource) => {
  let currentHiddenDataSources = [...state.hiddenDataSources]
  if (find(currentHiddenDataSources, payload)) {
    remove(currentHiddenDataSources, (source: DataSource) => {
      return source.type === payload.type && source.id === payload.id
    })
  } else {
    currentHiddenDataSources.push(payload)
  }
  return {
    ...state,

const emptyBurnTransaction: BurnTransaction = {
  numTokens: '0',
  reward: '0',
}

const initialState: TokensState = {
  current: Config.tokens.defaultList[0].address,
  mintTransaction: emptyMintTransaction,
  burnTransaction: emptyBurnTransaction,
  new: null,
  list: Config.tokens.defaultList,
  available: [],
}

export const reducer = createReducer({}, initialState)
reducer.on(resetToInitialState, (state: TokensState) => {
  return initialState
})

export const addToken = createAction('Add token')
reducer.on(addToken, (state: TokensState, payload?: Token) => {
  return {
    ...state,
    list: uniqBy([ ...state.list, payload ], (token: Token) => token.address),
  }
})

export const selectToken = createAction('Select token')
reducer.on(selectToken, (state: TokensState, payload?: string) => {
  return {
    ...state,

import {combineReducers} from 'redux';
import {createReducer} from 'redux-act';

import {IndexedTracks} from 'models';

import {actions} from './player.actions';

export const initialState = {
  list: null as IndexedTracks,
  isPlaying: false,
  currentTime: null as number,
  duration: null as number,
  currentId: null as string,
};

const currentId = createReducer({}, initialState.currentId).on(
  actions.playMusic,
  (_state, payload) => payload,
);

const isPlaying = createReducer({}, initialState.isPlaying)
  .on(actions.playMusic, () => true)
  .on(actions.toggle, (state) => !state);

const currentTime = createReducer({}, initialState.currentTime).on(
  actions.updateTime,
  (_state, {currentTime}) => currentTime,
);

const duration = createReducer({}, initialState.duration)
  .on(actions.updateTime, (_state, {duration}) => duration)
  .on(actions.playMusic, () => null);

import { createReducer, createAction } from 'redux-act'
import { loop, Effects } from 'redux-loop'
import client from '../../../helpers/apiClient'

export const fetch = createAction('mg/holidays/getHolidays')
export const fetchSuccess = createAction('mg/holidays/getHolidaysSuccess')
export const fetchFailure = createAction('mg/holidays/getHolidaysFailure')

const initialState = {
  isLoaded: false,
  isLoading: false,
  data: {}
}

const request = (country, year) => () =>
  client.get(`https://holidayapi.com/v1/holidays?key=f988097d-8481-420d-8f86-6b29abec97c4&country=${country}&year=${year}`)
    .then(fetchSuccess)
    .catch(fetchFailure)

const handleFetch = (state, payload) => {
  const { country, year } = payload

  return loop({

import { createReducer, createAction } from 'redux-act'
import { loop, Effects } from 'redux-loop'
import client from '../../../helpers/apiClient'

export const fetch = createAction('mg/holidays/getHolidays')
export const fetchSuccess = createAction('mg/holidays/getHolidaysSuccess')
export const fetchFailure = createAction('mg/holidays/getHolidaysFailure')

const initialState = {
  isLoaded: false,
  isLoading: false,
  data: {}
}

const request = (country, year) => () =>
  client.get(`https://holidayapi.com/v1/holidays?key=f988097d-8481-420d-8f86-6b29abec97c4&country=${country}&year=${year}`)
    .then(fetchSuccess)
    .catch(fetchFailure)

const handleFetch = (state, payload) => {
  const { country, year } = payload

reducer.on(setGroupClaimsBy, (state: ContactsState, payload?: any) => {
  return {
    ...state,
    groupClaimsBy: payload,
  }
})

export const setRoomForSharing = createAction('Set Room For Sharing clam')
reducer.on(setRoomForSharing, (state: ContactsState, payload?: string) => {
  return {
    ...state,
    roomForSharing: payload,
  }
})

export const addContact = createAction('Add contact')
reducer.on(addContact, (state: ContactsState, payload?: User) => {
  let list = [...state.list]
  remove(list, (item: User) => {
    return item.address === payload.address
  })
  return {
    ...state,
    list: [ ...list, payload ],
  }
})

export const setForEditing = createAction('Set contact for editing')
reducer.on(setForEditing, (state: ContactsState, payload?: User) => {
  return {
    ...state,
    editing: payload,