Reducer

Reducers are pure functions that receive the current state of the store and arguments and return a new state of the store.

Pure Functions

A pure function is a function which:

• Given the same input, will always return the same output.

• Produces no side effects.

Eric Elliot describes (in this article) very well what is the payoff of pure functions.

In this example the classic switch case of redux reducer disapeared. There is no more combine Reducer.

With RxStore there is no more switch case because we dispatch direclty a reducer to affect the state.

Reducers are destined to be dispatched thought the store.dispatch method. To do so, we can create Dispatchers.

Example

todo.reducers.js

export function addTodo(state, todo){
 return {
  ...state, // We don't mutate the state. We create a copy.
  todos: state.todos.concat(todo)
 }
}

export function removeTodo(state, todo){
 return {
  ...state, // again. 
  todos: state.todos.filter((t) => t.id !== todo.id))
 }
}

but we can imagine a more generic/functional way to split reducers like

common.reducers.js

export function addItem(state, list, item){
 return {
  ...state,
 }
}

export function removeItem(state, list, item, id){
 return {
  ...state,
 }
}

and rewrigth todo.reducers.js

import { addItem, removeItem } from './common.reducers.js';

export const addTodo = (state, todo) => addItem(state, 'todos', todo);

export const removeItem = (state, todo) => removeItem(state, 'todos', todo, (todo) => todo.id);