Part 1: Managing State in React Redux Mynotes Cheatsheet

State Tree

One of the key points of Redux is that all of the data is stored in a single object called the state tree

The Store

Rule# 1 Only an event can change the state of the store.

Redux offers predictable state management by having a single state tree. The state tree is an object that stores the entire state for an app. 3 way to interact

1. getting the state
2. listening for changes to the state
3. updating the state

The store is called when we combine the three items above and the state tree object itself into one unit which we called the store.

.subscribe

It returns a Promise that resolves to a PushSubscription object containing details of a push subscription

https://stackoverflow.com/questions/42000883/what-does-the-subscribe-function-do

.filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Events (action)

{
  type: "REMOVE_ITEM_FROM_CART",
  productId: 15
}

Pure Functions

Rule #2: The function that returns the new state needs to be a pure function.

What is a pure function:

1. Always returns the same result if the same argument/s is passed into
2. Dependent solely on the argument/s passed into
3. Does not reproduce side-effects, (ie: API requests and I/O operations). This means it has no interaction with the outisde code.

example pure funtion:

const double_sum= x => x + x;

Impure function example

let y = 1;
const double_sum= x => x + y;

Concat

The concat() method can be used to merge two or more arrays into one array and this method doesn't change the existing array, but instead returns a new array.

more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Reducer Function

a reducer in javascript is just a simple JS function. In Redux, a reducer is a function that takes two arguments — state and action and returns a new state based on the state and action that was passed.

Example of a Redux reducer

function appReducer (state, action){
    if(action.type === 'ADD_TODO'){
        return state.concat([action.todo])
    }
    
    return state
}

Results

https://github.com/edwinaquino/final-reactnd-redux-todos-goals