REACT Flashcards
(34 cards)
What is Redux
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.
What is the Basic Idea Behind Redux
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.
State
Source of truth that drives our app
Actions
the events that occur in the app based on user input, and trigger updates in the state.
One-way data flow
- 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
- The UI re-renders based on the new state
Immutability
can never be changed, in order to update code must make copies of existing obj/arrays and then modify the copies.
Actions
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.
Action Creators
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.
Reducers
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.
Reducers Rules
- 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.
Reducer Flow
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.
Store
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
dispatch
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.
what are dispatching actions like
“triggering an event” in the application something happened and we want the store to know about it.
reducers act like …
act like event listeners and when they hear an action they are interested in they update the state in response.
when do we call action creators
We typically call action creators to dispatch the right action
one way data flow initial set up
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.
one way data flow updates
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.
Flow
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
Thunk
is a specific kind of Redux function that can contain async logic
thunks written in two functions
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.
Provider
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
Thunk middleware added
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.
Data fetching for redux typically follows a predictable pattern:
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.
