REACT

Question 1

What is Redux

Answer 1

Redux is a pattern and library that helps to managing and updating state in an application using events called “actions’. It is an open sours JS library for managing state in an application. It stores all necessary data in our application in a JS object separate from our application. We can grab this data for any component by connecting the component.

Question 2

What is the Basic Idea Behind Redux

Answer 2

a single centralized place to contain global state in your application and specific patterns to follow when updating the state to make the code predictable.

Question 3

State

Answer 3

Source of truth that drives our app

Question 4

Actions

Answer 4

the events that occur in the app based on user input, and trigger updates in the state.

Question 5

One-way data flow

Answer 5

1. State describes condition of app at point in time

2. UI is revered based on that state
Something happens (click) the state is updated based on what occurred

3. The UI re-renders based on the new state

Question 6

Immutability

Answer 6

can never be changed, in order to update code must make copies of existing obj/arrays and then modify the copies.

Question 7

Actions

Answer 7

plain JS object that has a type field. (Event that describes something that happened in the application) type field should be a string that gives this action a descriptive name. Can have other fields with additional info about what happened by convention, put that info in a field called payload.

Question 8

Action Creators

Answer 8

a function that create and returns an action object. Typically use these so we don’t have to write the action object by hand every time.

Question 9

Reducers

Answer 9

function that receives the current state and an action object, decides how to update the state if necessary and returns the new state: (state, action) => newState (like an event listener which handles events based on the received action (event) type) get name bc similar to the kind of callback function you pass to the Array.reduce() method.

Question 10

Reducers Rules

Answer 10

1. Only calculate the new state value based on the state and action arguments
   2. Not allowed to modify existing state, instead make immutable updates, by copying the existing state and making changes to the copied values.
   3. Must not do any async logic, calculate random values, or cause side effects.

Question 11

Reducer Flow

Answer 11

Check to see if reducer cares about this actions
If os make a copy of the state, update the copy with new values and return it
If not return the existing state unchanged.

Question 12

Store

Answer 12

redux application state lives in an object called the store

created by passing in a reducer and has a method called get State that returned the current state value

Question 13

dispatch

Answer 13

redux store has a method called dispatch. Only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside and we can gall get State() to retrace the updated value.

Question 14

what are dispatching actions like

Answer 14

“triggering an event” in the application something happened and we want the store to know about it.

Question 15

reducers act like …

Answer 15

act like event listeners and when they hear an action they are interested in they update the state in response.

Question 16

when do we call action creators

Answer 16

We typically call action creators to dispatch the right action

Question 17

one way data flow initial set up

Answer 17

Initial set up :
Redux store is created using a root reducer function
Store calls the root reducer once and saves the return value as its initial state
When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.

Question 18

one way data flow updates

Answer 18

Updates:
Something happens in the app, click
App code dispatches and action to the Redux store like: dispatch ({type: ‘counter/increment’})
Store runs the reducer function again with the previous state and the current action and saves the return value as the new state
The store notifies all parts of the UI that are subscribed that the store has been updated
Each ui components that needs data from the store checks to see if the parts of the state they need have changed.
Each component that sees its Datta has changed forces a serenader with the new data, so it can update what’s shown on the screen.

Question 19

Flow

Answer 19

When something happens in the app:
The UI dispatches an action
The store runs the reducers, and the state is updated based on what occurred
The store notifies the UI that the state has changed
The UI re-renders based on the new state

Question 20

Thunk

Answer 20

is a specific kind of Redux function that can contain async logic

Question 21

thunks written in two functions

Answer 21

An inside thunk function which gets dispatch and getState as arguments
The outside creator function which creates and returns the thunk function
Using thunk requires that redux-thunk middleware be added to redux store when its created
When you need to make Ajax calls to fetch data from the server, you can put that call in a thunk.

Question 22

Provider

Answer 22

We use Provider to pass down redux store behind the scenes so components can access it.
We wrap app and then pass store ={store} in the provider, now react components can use dispatch

Question 23

Thunk middleware added

Answer 23

Once thunk middleware added to redux store it allows you to pass thunk functions directly to store.dispatch. a thunk function will always be called with (dispatch, getState) as its arguments and you can use them inside the thunk as needed. Thunks typically dispatch plain actions using action creators.

Question 24

Data fetching for redux typically follows a predictable pattern:

Answer 24

A “start” action is dispatched before the request, to indicate that the request is in progress. This may be used to track loading state to allow skipping duplicate requests or show loading indicators in the UI.
The async request is made
Depending on the request result, the async logic dispatches either a “success” action containing the result data, or a “failure” action containing error details. The reducer logic clears the loading state in both cases, and either processes the result data from the success case, or stores the error value for potential display.

Question 25

mapStateToProps

Answer 25

no longer reference store to get an updated state. adds new props to components we pass connect function, mapStateToProps and action creator as the props. when connect executes it calls the function passed in as a first argument, passing in the current state to the function.

Question 26

mapDispatchTo props

Answer 26

second function passed in. it passes in the dispatch function.

const mapDispatchToProps = dispatch => {
return {
addItem: () => {
dispatch(addItem())
}
}
}

we are adding a prop that points to a value addItem that points to the value, a function.

Question 27

const mapDispatchToProps = dispatch => {
return {
getTrailsBoundToDispatch: () => dispatch(getTrails())
}
}

Answer 27

export default connect(mapStateToProps, mapDispatchToProps)(Trails);

Question 28

export const getParks = () => {
    return (dispatch) => {
        dispatch({type: "LOADING_PARKS"})
        fetch('http://localhost:3001/parks')
        .then(res => res.json())
        .then(parks => dispatch({type: "FETCH_PARKS", payload: parks}))
    }
}

Answer 28

Write an action object, creator function we need this object to give to the reducer.

Only job to do is return dispatch(thunk)beginning of async. “hey i started”
second dispatch “hey im done”. sending in object to second one LOADING_Parks. (Kick off one)

go to reducer add case to switch.

go to component import dispatch getParks, connect. now connected to both state and dispatch.

ability to go get hem write a fetch.

1st calling dispatch LOADING_PARKS

fetch
.then res res.json
.then take in response park dispatch again passing in object, type: Fetch_Parks, second thing handing in action (payload: parks is the value)

have return of dispatch - function then dispatching when that function fired off which is fetching

returning a function, function taking in dispatch and calling it and the .then again is calling dispatch.

then add type to cases

Question 29

case "LOADING_PARKS":
                return {
                    ...state,
                    loading: true
                }

            case "FETCH_PARKS":
                return {
                    ...state,
                    parks: action.payload,
                    loading: false
                }

            case "ADD_PARK":
                return {
                    ...state,
                    loading: true
                } 

            case 'PARK_ADDED':
                return {
                    ...state,
                    parks: [...state.parks, action.payload],
                    loading: false
                }

Answer 29

case statement, loading parks. return, nothing new …state. first is just returning beginning of state.

FETCH_PARKS return all state, and parks as a key with value of action.payload

Question 30

of parks

Answer 30

ParkList.js

in MSTP add, numParks: state.parkReducer.parks.length

<h2> number of parks { this.props.numParks </h2>

Question 31

of trails

Answer 31

TrailList.js

in MSTP add, numTrails: state.trailReducer.parks.length

<h2> number of trails {this.props.numTrails</h2>

Question 32

Filter array of Objects

Answer 32

declare what value to filter on and then map the filtered objects.

<div>
   {trails.filter(trail => trail.difficulty = easy).map(filteredTrail => (
<li>
 {filteredTrail.name}
</li>
))}
</div>

Question 33

arrow function

Answer 33

prevents this bugs
display items
less expensive

Question 34

client side routing

Answer 34

we are not making constant http get requests it is responsibility of the client side code rather than server to handle routing fetching and displaying of data in browser. major benefit is speed. we get one original get request with our initial html css and js files. with js history api we have ability to push state to history entries state/title/url