vzaidman

export const fetchTodos = makeThunkAsyncActionCreator('FETCH_TODOS', filter => fetchTodosFromServer(filter))

// fetchTodos.TYPE === 'FETCH_TODOS@ASYNC_REQUEST'

vzaidman

export default function makeAsyncActionCreator(baseName) {
  const actionCreator = makeActionCreator(`${baseName}@ASYNC_REQUEST`)
  
  actionCreator.success = makeActionCreator(`${baseName}@ASYNC_SUCCESS`)
  
  actionCreator.failure = makeActionCreator(`${baseName}@ASYNC_FAULURE`)
  
  return actionCreator
}

vzaidman

// replacing constants
import {fetchTodos} from './actions'

export default function(state=..., action){
  case fetchTodos.TYPE:
     return ...
  case fetchTodos.success.TYPE: 
     return ...
  casse fetchTodos.failure.TYPE: 
     return ...

vzaidman

// 1. you pass the base name of actions, and an async function
export default function makeThunkAsyncActionCreator(baseName, asyncFn) {
  
  // 2. an async action creator is created to indicate the asyncFn progress
  const actionCreator = makeAsyncActionCreator(baseName)
  
  // 3. thunk action creator is what returns from "makeThunkAsyncActionCreator" and it is ready to be called
  const thunkActionCreator = (...args) => (dispatch, getState) => {
    
      // 4. when the action creator is called with certain arguments (...args), we dispatch a pending action

vzaidman

import { fetchOrders } from './actions'

export const vanilaReducerWithToolbeltAction = (state = {}, action) => {
  switch(action.type):
    case fetchOrders.TYPE:
      return { loading: true }
  
    case fetchOrders.success.TYPE:
      return { loading: false, data: action.payload }
  

vzaidman

import { makeThunkActionCreator } from 'redux-toolbelt-thunk'
import { api } from '../services'

export const login = makeThunkActionCreator(‘login’,(email, password) => api.login(email, password)))

export const signUp =  makeThunkActionCreator(‘signUp’, signUpData => api.signUp(signUpData))
                                             
export const fetchProfile = makeThunkActionCreator(‘fetchProfile’, () => api.fetchProfile())

export const logout = makeThunkActionCreator(‘logout’, () => api.logout().then(() => {return undefined})

vzaidman

import { makeThunkActionCreator } from 'redux-toobelt-thunk'

export const fetchOrders = makeThunkActionCreator(‘fetchOrders’, () => api.fetchOrders()))

export const addOrder = makeThunkActionCreator(‘addOrder’, order => api.addOrder(order))

export const updateOrder = makeThunkActionCreator(‘updateOrder’, order => api.updateOrder(order))

export const fetchProfile = makeThunkActionCreator(‘removeOrder’, id => api.removeOrder(id).then(() => id))

vzaidman

import { ordersReducer } from './oreders-reducer'
import { fetchOrders, addOrder, updateOrder, fetchProfile } from './actions'
import { getState, dispatch } from './store'

dispatch({ TYPE: '@@INIT' })

console.log(getState())
// the initial state is { data: [], loading: false }

// when we dispatch the "fetchOrders" action, an api call to fetch orders is made

vzaidman

import {
  makeAsyncActionCreator as makeAsyncActionCreatorOrig,
  makeActionCreator as makeActionCreatorOrig,
  composeReducers,
  makeAsyncReducer,
  makeReducer,
} from 'redux-toolbelt'

const makeAsyncActionCreator = makeAsyncActionCreatorOrig.withDefaults({ prefix: 'document/' })
const makeActionCreator = makeActionCreatorOrig.withDefaults({ prefix: 'document/' })

vzaidman

// redux-toolbelt action creator is imported directly to the reducer
import {increaseBy} from './actions'

export default countReducer = (state = deafaultState, {payload, type}) => {
  switch(type){
      
   // the action creator is used inside the reducer to get it's type
   case increaseBy.TYPE:
     return {
        ...state,