redcers_vs_functions.js

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      {
        ...state[action.index],
        completed: true
      },
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

function todoApp(state = initialState, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return {
      ...state,
      visibilityFilter: action.filter
    };
  case ADD_TODO:
  case COMPLETE_TODO:
    return {
      ...state,
      todos: todos(state.todos, action)
    });
  default:
    return state;
  }
}

const todos = {
  addTodo: (state, {text}) => ([
    ...state,
    {
      text,
      completed: false
    }
  ]),

  completeTodo: (state, {index}) => ({
    ...state.slice(0, index),
    {
      ...state[index],
      completed: true
    },
    ...state.slice(index + 1)

  })
}

const todoApp = {
  setVisibilityFilter: (state, filter) => ({
    ...state,
    visibilityFilter: filter
  }),

  completeTodo: (state, {index}) => ({
    ...state,
    todos: todos.completeTodo(state.todos, {index})
  }),

  addTodo: (state, {text}) => ({
    ...state,
    todos: todos.addTodo(state.todos, {text})
  })
}

toReducerExample.js

function toReducer(obj) {
  return function reducer(state, action) {
    return obj[action.type]
      ? obj[action.type](state, action)
      : state
  }
}

const todos = toReducer({
  addTodo: (state, {text}) => ([
    ...state,
    {
      text,
      completed: false
    }
  ]),

  completeTodo: (state, {index}) => ({
    ...state.slice(0, index),
    {
      ...state[index],
      completed: true
    },
    ...state.slice(index + 1)

  })
})

const todoApp = toReducer({
  setVisibilityFilter: (state, filter) => ({
    ...state,
    visibilityFilter: filter
  }),

  completeTodo: (state, action) => ({
    ...state,
    todos: todos(state.todos, action)
  }),

  addTodo: (state, {text}) => ({
    ...state,
    todos: todos(state.todos, {text})
  })
})

toReducerTcombExample.js

function toReducerTcomb(obj) {
  return function reducer(state, action) {
    return obj[action.type]
      ? t.update(state, obj[action.type](action, state))
      : state
  }
}

const todos = toReducerTcomb({
  addTodo: ({text}) => ({
    $push: {
      text,
      completed: false
    }
  }),

  completeTodo: ({index}) => ({
    $splice: [[index, 1, {
      completed: true
    }]]
  })
})

const todoApp = toReducerTcomb({
  setVisibilityFilter: filter => ({
    $merge: {
      visibilityFilter: filter
    }
  ),

  completeTodo: (action, {todos}) => ({
    $merge: {
      todos: todos(todos, action)
    }
  }),

  addTodo: (action, {todos}) => ({
    $merge: {
      todos: todos(todos, action)
    }
  })
})