KnowCheck:Redux FUNDAMENTALS 1

Question 1

What is Redux?

Answer 1

• serves as a centralized store for state.
• is a pattern and library for managing/updating application state, using events called “actions”.
• has rules ensuring that the state can only be updated in a predictable fashion.

Question 2

Why Should I Use Redux?

Answer 2

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

Question 3

When Should I Use Redux?

Answer 3

• It’s a trade-off between short term and long term productivity.
• more code to wtite
• also adds some indirection to your code

Question 4

What is redux most useful for?

Answer 4

You have large amounts of application state that are needed in many places in the app

The app state is updated frequently over time

The logic to update that state may be complex

The app has a medium or large-sized codebase, and might be worked on by many people

Question 5

Who is Mark Erikson

Answer 5

maintains Redux &Redux Toolkitand has been lovingly called, “Tech Support for the React Community”.

Question 6

Why was Redux invented?

Answer 6

Mark Erikson: “So in the case of Redux, it was invented as an implementation of theFlux architecture, which was in turn created to deal with limitations people had found in event-trigger-based state management, like Backbone specifically.”

So I setuser.firstName, it triggers a “change firstName” event, some other code is listening to that, it triggers another event…
Next thing you know, you’re 15 events down one big synchronous call stack, and you have no idea why this happened in the first place. That’s what Flux was invented to solve, and Redux basically perfected that particular approach. And that was the problem people were trying to solve in 2015.

Question 7

When should you use Context?

Answer 7

So if the only thing you needed to do with Redux is avoid passing data as props through 15 levels of your components - well, that’s literally what Context was invented to do.

Question 8

T/F Context is a state managment system?

Answer 8

False: It’s a dependency injection mechanism, and you can put whatever value you want in Context, and most often you are the one managing that state in a React component, with theuseStatehook or theuseReducerhook.

useReducerplususeContexttogether kind of make up a state management system. And that one is more equivalent to what Redux does with React, butContext by itself is not a state management system.

Question 9

Use case for not using Redux

Answer 9

Similarly, if the only thing you were doing with Redux was storing cache data from the server, and you choose to use GraphQL and you choose to use Apollo Client, then you’ve just fulfilled the use case that you were previously choosing to use Redux for,and for that situation you don’t need Redux.

Question 10

What is a store and how does it work?.

Answer 10

Store = a “cotainer” that hoods your applications global state.

You should:

• never directly change/update the state within store
• to change/update: create a plain action and dispatch this action to the store
• when you dispatch an action: store runs the root reducer function which calculates the new state = old state + action.
• finally, store notifies subscribers

Question 11

What are “SideEffects”

Answer 11

Side effects” is a broad term, but basically, it means modifying things outside the scope of that immediate function. Some examples of side effects…

Mutating/modifying input parameters, likegiveAwesomePowersdoesModifying any other state outside the function, like global variables, ordocument.(anything)orwindow.(anything)Making API callsconsole.log()Math.random()

Question 12

Certain array methods will mutate the array they’re used on: what are they? Hint, 7. ppusss

Answer 12

push (add an item to the end)
pop (remove an item from the end)
shift (remove an item from the beginning)
unshift (add an item to the beginning)
sort
reverse
splice

Question 13

Say you wanted to make a copy of an array. How would you?

Answer 13

let a = [1, 2, 3];
let copy1 = […a];
let copy2 = a.slice();
let copy3 = a.concat();

Question 14

Pure or impure function? why?

function giveAwesomePowers(person) { 
let newPerson = Object.assign({}, person, { specialPower: 'invisibility' })
 return newPerson; 
}

Answer 14

Pure

This is a bit different now. Instead of modifying the person, we’re creating anentirely new person.

If you haven’t seenObject.assign, what it does is assign properties from one object to another