The Vanilla Redux Counterpart

0_constants.js

export const FETCH_TODOS_LOADING = 'FETCH_TODOS@LOADING'
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS@SUCCESS'
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS@FAILURE'

1_actions.js

import { FETCH_TODOS_LOADING, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE } from './consts'

export const fetchTodos = filter => {
  return (dispatch, getState) => {
    dispatch({type: FETCH_TODOS_LOADING})
    fetchTodosFromServer(filter)
      .then(data =>
        dispatch({type: FETCH_TODOS_SUCCESS, payload: data}))
      .catch(error =>
        dispatch({type: FETCH_TODOS_FAILURE, payload: error}))
  }
}

2_reducers.js

import { FETCH_TODOS_LOADING, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE } from './consts'

const initialState = {
  error: undefined,
  loading: false,
  data: undefined,
}

export const todos = (state = initialState, action) => {
  switch (action.type){
    case FETCH_TODOS_LOADING:
      return { loading: true }
    case FETCH_TODOS_SUCCESS:
      return { data: action.payload, loading: false }
    case FETCH_TODOS_FAILURE:
      return { error: action.payload, loading: false }
    default:
      return state
  }
}