[Redux] Composition with Objects

For example, current we have those todos:

{
  todos: [ {
  completed: true,
  id: 0,
  text: "Learn Redux"
}, {
  completed: false,
  id: 1,
  text: "Go shopping"
}],
}

 

And now what we want to do is add a 'visibilityFilter' prop to the object, composition with object enables us easily create a new reducer that calls the existing reducers to manage parts of its state and combines the results in a single state object and we don't need to change our current reducer.

 

Our current reducer:

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};


const todoApp = (state = {}, action) => {
  return {
    todos: todos(
      state.todos,
      action
    )
  };
};

 

Add a new reducer:

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

const visibilityFilter = (
  state="SHOW_ALL",
  action
) => {
  switch(action.type){
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
      break;
    default:
      return state;
  }
}

const todoApp = (state = {}, action) => {
  return {
    todos: todos(
      state.todos,
      action
    ),
    visibilityFilter: visibilityFilter(
      state.visibilityFilter,
      action
    )
  };
};

 

-------------------

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

const visibilityFilter = (
  state = 'SHOW_ALL',
  action
) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

const todoApp = (state = {}, action) => {
  return {
    todos: todos(
      state.todos,
      action
    ),
    visibilityFilter: visibilityFilter(
      state.visibilityFilter,
      action
    )
  };
};

const { createStore } = Redux;
const store = createStore(todoApp);

console.log('Initial state:');
console.log(store.getState());
console.log('--------------');

console.log('Dispatching ADD_TODO.');
store.dispatch({
  type: 'ADD_TODO',
  id: 0,
  text: 'Learn Redux'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');

console.log('Dispatching ADD_TODO.');
store.dispatch({
  type: 'ADD_TODO',
  id: 1,
  text: 'Go shopping'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');

console.log('Dispatching TOGGLE_TODO.');
store.dispatch({
  type: 'TOGGLE_TODO',
  id: 0
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');

console.log('Dispatching SET_VISIBILITY_FILTER');
store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');

 

"Initial state:"
[object Object] {
  todos: [],
  visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching ADD_TODO."
"Current state:"
[object Object] {
  todos: [[object Object] {
  completed: false,
  id: 0,
  text: "Learn Redux"
}],
  visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching ADD_TODO."
"Current state:"
[object Object] {
  todos: [[object Object] {
  completed: false,
  id: 0,
  text: "Learn Redux"
}, [object Object] {
  completed: false,
  id: 1,
  text: "Go shopping"
}],
  visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching TOGGLE_TODO."
"Current state:"
[object Object] {
  todos: [[object Object] {
  completed: true,
  id: 0,
  text: "Learn Redux"
}, [object Object] {
  completed: false,
  id: 1,
  text: "Go shopping"
}],
  visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching SET_VISIBILITY_FILTER"
"Current state:"
[object Object] {
  todos: [[object Object] {
  completed: true,
  id: 0,
  text: "Learn Redux"
}, [object Object] {
  completed: false,
  id: 1,
  text: "Go shopping"
}],
  visibilityFilter: "SHOW_COMPLETED"
}
"--------------"