redux reducer examples

nested_state.js

import { findIndex } from 'lodash';

export const initialState = {
  users: [{
    id: 'cpo5ienzpf',
    name: 'joe',
    active: true,
  }],
  lists: [{
    id: '9fve86satx',
    owner: 'cpo5ienzpf',
    title: 'my todos',
    active: true,
    todos: [{
      id: 'pdsjn40tl7',
      title: 'do a thing',
      completed: false,
    }, {
      id: 'kyyhw02sy7',
      title: 'remove this thing',
      completed: false,
    }, {
      id: '4h2hl2sh4u',
      title: 'completed thing',
      completed: true,
    }],
  }],
};

function articleReducer(currentState, action) {
  function addTodoFn(state, { listId, todo }) {
    const listIndex = findIndex(state.lists, ['id', listId]);
    if (listIndex < 0) return state;

    const curList = state.lists[listIndex];
    const newList = {
      ...curList,
      todos: curList.todos.concat(todo),
    };

    return {
      ...state,
      lists: state.lists.map((list, idx) => {
        if (idx === listIndex) return newList;
        return list;
      }),
    };
  }

  function removeTodoFn(state, { listId, todoId }) {
    const listIndex = findIndex(state.lists, ['id', listId]);
    if (listIndex < 0) return state;

    const curList = state.lists[listIndex];
    const newList = {
      ...curList,
      todos: curList.todos.filter(todo => todo.id !== todoId),
    };
    return {
      ...state,
      lists: state.lists.map((list, idx) => {
        if (idx === listIndex) return newList;
        return list;
      }),
    };
  }

  if (action.type === 'ADD_TODO') return addTodoFn(currentState, action.payload);
  if (action.type === 'REMOVE_TODO') return removeTodoFn(currentState, action.payload);
  return currentState;
}

let runningState = {};
export function getCurrentState() {
  return runningState;
}

function setRunningState(state) {
  runningState = state;
  return runningState;
}

export const newTodo = {
  id: '9794fbo99',
  title: 'add another todo',
  completed: true,
};

export function addTodo() {
  return setRunningState(articleReducer(runningState, {
    type: 'ADD_TODO',
    payload: { listId: '9fve86satx', todo: newTodo }
  }));
}

export function removeTodo() {
  const removeId = 'kyyhw02sy7';
  return setRunningState(articleReducer(runningState, {
    type: 'REMOVE_TODO',
    payload: { listId: '9fve86satx', todoId: removeId }
  }));
}

setRunningState(initialState);

normalized_state.js

export const initialState = {
  users: {
    'cpo5ienzpf': {
      id: 'cpo5ienzpf',
      name: 'joe',
      active: true,
    },
    'jwc1kjzwow': {
      id: 'jwc1kjzwow',
      name: 'rashid',
      active: true,
    },
  },
  lists: {
    '9fve86satx': {
      id: '9fve86satx',
      owner: 'cpo5ienzpf',
      title: 'my todos',
      active: true,
      todos: ['pdsjn40tl7', 'kyyhw02sy7', '4h2hl2sh4u' ],
    },
  },
  todos: {
    'pdsjn40tl7': {
      id: 'pdsjn40tl7',
      title: 'do a thing',
      completed: false,
    },
    'kyyhw02sy7': {
      id: 'kyyhw02sy7',
      title: 'remove this thing',
      completed: false,
    },
    '4h2hl2sh4u': {
      id: '4h2hl2sh4u',
      title: 'completed thing',
      completed: true,
    },
  },
};

function articleReducer(currentState, action) {
  function addTodoFn(state, { listId, todo }) {
    const curList = state.lists[listId];
    if (!curList) return state;

    const newTodos = {
      ...state.todos,
      [todo.id]: { ...todo },
    };

    const newList = {
      ...curList,
      todos: curList.todos.concat(todo.id),
    };

    return {
      ...state,
      todos: newTodos,
      lists: {
        ...state.lists,
        [listId]: newList,
      },
    };
  }

  function removeTodoFn(state, { listId, todoId }) {
    const curList = state.lists[listId];
    if (!curList) return state;

    const newList = {
      ...curList,
      todos: curList.todos.filter(todo => todo !== todoId),
    };
    const newTodos = Object.keys(state.todos).reduce((acc, key) => {
      if (key === todoId) return acc;
      return Object.assign(acc, { [key]: state.todos[key] });
    }, {});

    return {
      ...state,
      lists: {
        ...state.lists,
        [listId]: newList,
      },
      todos: newTodos,
    };
  }

  if (action.type === 'ADD_TODO') return addTodoFn(currentState, action.payload);
  if (action.type === 'REMOVE_TODO') return removeTodoFn(currentState, action.payload);
  return currentState;
}

let runningState = {};
export function getCurrentState() {
  return runningState;
}

function setRunningState(state) {
  runningState = state;
  return runningState;
}

export const newTodo = {
  id: '9794fbo99',
  title: 'add another todo',
  completed: true,
};

export function addTodo() {
  return setRunningState(articleReducer(runningState, {
    type: 'ADD_TODO',
    payload: { listId: '9fve86satx', todo: newTodo }
  }));
}

export function removeTodo() {
  const removeId = 'kyyhw02sy7';
  return setRunningState(articleReducer(runningState, {
    type: 'REMOVE_TODO',
    payload: { listId: '9fve86satx', todoId: removeId }
  }));
}

setRunningState(initialState);