fcc redux curriculum snippets

fcc-redux

this is for the free code camp course on Redux https://learn.freecodecamp.org/front-end-libraries/redux/create-a-redux-store

https://learn.freecodecamp.org/front-end-libraries/redux/write-a-counter-with-redux

• need to return the whole action creator
• need to initialize a default state to get it going

// define a constant for increment action types
const INCREMENT = 'INCREMEMENT'; 

// define a constant for decrement action types
const DECREMENT = 'DECREMENT'; 

// define the counter reducer which will increment or decrement the state based on the action it receives
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case (INCREMENT): 
      return ++state;
    case (DECREMENT): 
      return --state;
    default:
      return state;
  }
}; 

// define an action creator for incrementing
const incAction = () =>  {return {type: INCREMENT}}; 

// define an action creator for decrementing
const decAction = () =>  {return {type: DECREMENT}}; 

// define the Redux store here, passing in your reducers
const store = Redux.createStore(counterReducer); 

https://learn.freecodecamp.org/front-end-libraries/redux/never-mutate-state

Immutable state means that you never modify state directly, instead, you return a new copy of state.
This immutability, in fact, is what provides such features as time-travel debugging that you may have heard about.

// define action type constant
const ADD_TO_DO = 'ADD_TO_DO';

// A list of strings representing tasks to do:
const todos = [
  'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code',
];

const immutableReducer = (state = todos, action) => {
  switch(action.type) {
    case ADD_TO_DO:
      // don't mutate state here or the tests will fail
      // return all the todos spread
      // with the new action.todo
      return [...todos, action.todo];
    default:
      return state;
  }
};

// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    // nice tricky es6  object assignment
    todo
  }
}

const store = Redux.createStore(immutableReducer);

https://learn.freecodecamp.org/front-end-libraries/redux/remove-an-item-from-an-array

• need to remove an item without slice
• nope: let newState = state.slice(action.index);

https://stackoverflow.com/questions/34582678/is-this-the-correct-way-to-delete-an-item-using-redux

• fitler returns a new arr

const immutableReducer = (state = [0,1,2,3,4,5], action) => {
  switch(action.type) {
    case 'REMOVE_ITEM':
      // don't mutate state here or the tests will fail

      let newState = state.filter((element, index) => {
       return  index !== action.index
      })
      console.log(newState);
      return newState
    default:
      return state;
  }
};

const removeItem = (index) => {
  return {
    type: 'REMOVE_ITEM',
    index
  }
}

const store = Redux.createStore(immutableReducer);

https://learn.freecodecamp.org/front-end-libraries/redux/copy-an-object-with-object-assign

• const newObject = Object.assign({}, obj1, obj2);

This creates newObject as a new object, which contains the properties that currently exist in obj1 and obj2.

• basically edit the properties mentioned
• doesn't mutate

const defaultState = {
  user: 'CamperBot',
  status: 'offline',
  friends: '732,982',
  community: 'freeCodeCamp'
};
undefined
console.log(Object.assign({}, defaultState, {status: 'online'}))

{user: "CamperBot", status: "online", friends: "732,982", community: "freeCodeCamp"}

const defaultState = {
  user: 'CamperBot',
  status: 'offline',
  friends: '732,982',
  community: 'freeCodeCamp'
};

const immutableReducer = (state = defaultState, action) => {
  switch(action.type) {
    case 'ONLINE':
      // don't mutate state here or the tests will fail
      return Object.assign({}, defaultState, {status: 'online'});
    default:
      return state;
  }
};

const wakeUp = () => {
  return {
    type: 'ONLINE'
  }
};

const store = Redux.createStore(immutableReducer);