Redux

Question 1

What is the purpose of redux?

Answer 1

To manage state and to make state more predictable

Question 2

What are the benefits of redux over native state management?

Answer 2

The data is separated from the UI and lives outside of the UI.

All of the data is located in one place and needs to be only changed once

This makes it easier to share data between components

Makes State more predictable

Question 3

How does Redux store data?

Answer 3

In a state tree

Question 4

what is the only thing that can change the state of a store?

Answer 4

Only an event can change the state of a store

Question 5

What are “Actions”?

Answer 5

Actions are events that change the state of the store.

They are objects that contains a type, property and the state that needs to be mutated.

example:

{
    type:"ADD_GOAL",
    goal: {
        id: 0,
        name: "Run 5km"
     }
}

Question 6

What are action creators?

Answer 6

Action Creators are functions that create/return action objects

example:

const addItem = (item)=>{
    return {
        type:"ADD_ITEM",
        item
    }
}

Question 7

Rules

Answer 7

1. ONLY an event can change the state

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

Question 8

Pure Functions

Answer 8

1. Always returns the same result if the same arguments are passed in
2. Depends solely on the arguments passed into them
3. Does not produce side effects (no interaction with the outside world)

// square() is a pure function

const square = x => x * x;

Question 9

What is the main benefit of pure functions?

Answer 9

the most important feature of a pure function is that it’s predictable. If we have a function that takes in our state and an action that occurred, the function should (if it’s pure!) return the exact same result every single time.

Question 10

What does the .dispatch method do?

Answer 10

it updates the state in the store by calling the reducer and then invoking any associated subscriptions.

Question 11

Which three methods are available on the store?

Answer 11

.getState() -return state

.subscribe() -notifies when state changes

.dispatch(state, action) - updates the state

Question 12

Which store method connects react components to the store?

Answer 12

.subscribe()

Question 13

How to create a store with more than one reducer?

Answer 13

combine mutliple reducers into one root reducer like so:

function root (state = {},action){
    return{
        todos:todos(state.todo,action),
        goals:goals(state.goals,action)
    }
}

Question 14

Which function to call on the Redux library to combine multiple reducers?

Answer 14

Redux.combineReducers({
todos,
goals
}))

Question 15

How to add middlewear into redux

Answer 15

const store = Redux.createStore( , Redux.applyMiddleware() )

Question 16

How to save state to local storage in the browser?

Answer 16

const configureStore = () => {
  const store = createStore(Reducer);

store.subscribe(() => {
localStorage.state = JSON.stringify(store.getState());
});

return store;
};