Please enable JavaScript.
Coggle requires JavaScript to display documents.
REDUX - Coggle Diagram
REDUX
-
OVER-VIEW
Action
-
EX:
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}
-
-
-
Selector
functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data:
DATA-FLOW
One-way data flow
Initial setup:
The 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.
-
Updates
-
the app code dispatch an action to the Redux store, like dispatch({type: 'counter/increment'})
-
-
Each UI components that need data from the store checks to see iff the parts of the state they need have changed
Each component that see its data has changed forces a re-render with the new data, so it can update what's shown on the screen