Learn Redux - Wes Bos

Question 1

Within React Router, what is an IndexRoute?

Answer 1

When routes are nested, declaring a route as an IndexRoute instead of just a Route means that if the base url is visited, the IndexRoute is the route which will be fed to the main parent by default, the other will have to be explicitly visited.

Question 2

What is the main difference with Redux over plain React?

Answer 2

We keep all of our data within a single Store rather than holding our state in a bunch of component states. We have one giant object that contains all of our data for all of our store.

Question 3

How do we see what is in our store (from within the console, say)

Answer 3

Provider.store.getState()

Question 4

What are the two core components behind working with Redux?

Answer 4

Reducers and Actions

Question 5

Where do we create our store.js file?

Answer 5

Within our client folder (not within the components folder)

Question 6

What is the benefit of using syncHistoryWithStore?

Answer 6

We can hook up ReactRouter with our Redux instance.

Question 7

Why do we import browserHistory from React Router into our Redux Store instead of directly into our main app file?

Answer 7

Because we will need to modify its behavior slightly to sync it up with Redux.

Question 8

What two arguments does the Redux createStore command take?

Answer 8

the first if the rootReducer (imported from the reducers index) the second is the defaultState - which can just be an object literal declared within the statement, but it’s clearer to usually set it up as a separte variable and then just pass that variable as the argument.

Question 9

What is going on in this statement below?
export const history = syncHistoryWithStore(browserHistory, store);

Answer 9

We are taking the browser history and the push state, and then weaving in the actual store - we will need this history then to be accessible to other files because although we are creating it here, we will actually be using it elsewhere. We export it because that’s how you get something out of one file and into another.

Question 10

What are Redux Actions?

Answer 10

Think of an Action as something that happens in your application - someone clicks on a photo, adds a comment, likes a picture or whatever. Whenever something happens, Redux dispatches an action.

Question 11

What two things does a Redux dispatchAction contain?

Answer 11

1. ) The type of action that happened (maybe ‘incrementLikes’ or ‘addComment’ or whatever)
2. ) A payload of info that is needed - WHICH comment was deleted - who was the author - this is the info about the specifics of what happened.

Question 12

Where do we create our Redux actions?

Answer 12

Within an ‘actions’ folder, under the client folder. Within this folder, we can either have one giant ‘actionCreators.js’ file - or we can break them off into individual files if we have a lot of them going on.

Question 13

What does a Redux ActionCreator do?

Answer 13

It puts the action object together and dispatches it to our Reducer.

Question 14

Within React, what actually updates our state?

Answer 14

Our Reducers handle and update the actual state.

Question 15

What is a helpful way to think of actions?

Answer 15

As regular JS actions that just get fired off - but if no function is listening to that click or button or whatever - then nothing actually happens.

Question 16

How many reducers do we create?

Answer 16

One for each piece of state - if you’re confused on what the pieces of state are, you can open up your store.js file and see. You need a reducer for each piece.

Question 17

What two things does a reducer take in?

Answer 17

1. The action (info about what happened)

2. A copy of current state.

Question 18

How does a reducer work?

Answer 18

It takes in the store and info about what happened, then we do whatever work we need to do on it (update a number or whatever) - and then we return the new store, and then React/Redux takes over and does all it needs to do to update the UI and the Virtual DOM and so on for us.

Question 19

Why do we pass an empty array for state as a default param to our Reducer functions?

Answer 19

Because when it initially runs, we won’t have state yet, so we need to account for that.

Question 20

Why do we need rootReducer?

Answer 20

Because within Redux, ultimately we can only have one reducer - so, we create individual reducers for each piece of state, but then we need to put them into a rootReducer in order to use them.

Question 21

Why do we need to pass rootReducer our routing ?

Answer 21

Because that is also going to live in our state - whenever we change the route - that lives within the browserHistory within state.

Question 22

Where do we create our rootReducer?

Answer 22

Within an index.js file in our reducers folder. We have to import combineReducers from redux, and routerReducer from react-router-redux.

Question 23

What is the react-redux package?

Answer 23

It provides the bindings for redux to react and lets us use them together. Though these two are often seen together - redux can actually be used with what you’d like to use it with.

Question 24

When do we use curly brackets within an import?

Answer 24

For named exports - they are unneeded for default exports.

Question 25

What is the Provider tag used for?

Answer 25

The Provider tag is used to wrap around the router in order to expose our store to our actual application. The Provider component takes a store prop - which we can import in from our store.js file.

Question 26

How do we hook up an Action and a Reducer?

Answer 26

We dispatch an action, and then the reducer will listen for it, and we write code within the reducer to handle it.

Question 27

When does a reducer run?

Answer 27

Every single reducer runs whenever any action is dispatched. We have to have logic within our reducer to determine whether or not to act on that particular action within our reducer. Otherwise, we need to just return state.

Question 28

How do we get state into Main with Redux?

Answer 28

Whereas in regular React we have to take the state at whatever component it lives and then pass it down and pass it down and pass it down every level until we get to where we want - with Redux we have access to the Connect function which allows us to inject that data at whatever level we actually need it.

Question 29

How do we expose our ActionCreators and our State to a component?

Answer 29

We create a second component that sort of sprinkles the ActionCreators and data on top using the maStateToProps and mapDispatchToProps functions.

Question 30

What do the mapStateToProps and mapDispatchToProps functions do?

Answer 30

They take our state and our dispatch and surface those data and functions via props into our component. via the components.

Question 31

What does calling your connect function against a component do?

Answer 31

It takes your regular component and adds all of the data from state to props, and adds all our Action Createors to props as well.

Question 32

When you use the React.cloneComponent method, what is one side benefit in regards to props?

Answer 32

It automatically passes down al the props to the nested child, so it has access to its parents props without having to specify them

Question 33

Why don’t you want to do something like

Answer 33

By using .bind(null, param) or in this case:

We pass null as the first argument because React already does all the binding for us.

Question 34

What’s important about the fact that Redux is using functional programming?

Answer 34

The golden rule of functional programming is that we do not mutate our state - we want all of our functions to be pure functions.

Question 35

What is a pure function?

Answer 35

A predictable function - every time we give it the same input, we expect to receive the same output.

Question 36

How should we handle changes to state within functional programming and Redux?

Answer 36

Take a copy of the state and modify that copy, then return the new state.

Question 37

If for some reason you do want to reference a DOM element directly from within direct (maybe to clear a form or get the value within the element) how do you do that?