Redux Fundamentals Flashcards
Action
An action is a simple Javascript object. It contains the updated data and the type of operation that needs to be performed to mutate the store. The action forwars this information to the dispatcher
Dispatcher
Dispatch the appropriate callback functions that the store registers. It also maintains the dependency between multiple stores in the application
Store
The store contains all the logic used to mutate the state.
Redux architecture
unidirectional data flow
- Action
- reducer
- store
- view
Three principles of Redux
- A Redux app should have a single source of truth called the store
- The store is read-only and is mutated soley by displatching actions
- Changes to the store are made using pure functions called reducers
First principle
Second Principle
An action contains information about how to modify the state. The action forwards the information to a reducer function
var action = {}
action = {
type: 'CHANGE_EMAIL',
payload: 'johndoe@email.com'
}Third Principle
Reducers mutate the state. The reducer function takes two arguments – state and action. It uses the information inside the action to mutate the state. Since the view/component has already been subscribed to the store, it gets updated with the new data automatically.
// Redux Store
let store = {
name: 'John Doe',
email: 'john@doe.com'
}
// Redux Action
let action = {
type: 'CHANGE_EMAIL',
payload: 'johndoe@email.com'
}
// Redux Reducer function
let reducer = (store, action) => {
switch (action.type) {
case 'CHANGE_EMAIL':
let newState = {
...store,
email: action.payload
}
return newState;
break;
}
}Unidirectional dataflow of Redux architecture
- user event
- action forwards this to reducer
- reducer takes the current state from the store
- reducer mutates the state with the action’s payload
- view subscibes to the store and displays the new state
Three types of state
- global
- multicomponent
- local
Global state
stores the data this is accessible from anywhere in an application and can be accessed by all components
let user = {
name: 'John Doe'
}
let profileComponent = () => {
const userProfile = {
name: user.name
}
console.log('Profile Component:');
console.log(userProfile);
}
let checkoutComponent = () => {
const userAddress = {
name: user.name
}
console.log('Checkout Component:')
console.log(userAddress);
}
let shoppingCartComponent = () => {
const cart = {
user: user.name,
products: [
// ...
]
}
console.log('Shopping Cart Component:')
console.log(cart);
}
profileComponent();
checkoutComponent();
shoppingCartComponent();Multicomponent state
state is shared among various application components
let user = {
name: 'John Doe',
email: 'johndoe@gmail.com'
}
let profileComponent = () => {
const userProfile = {
name: user.name,
email: user.email
}
console.log('Profile Component:');
console.log(userProfile);
}
let checkoutComponent = () => {
const userAddress = {
name: user.name,
email: user.email
}
console.log('Checkout Component:')
console.log(userAddress);
}
let shoppingCartComponent = () => {
const cart = {
user: user.name,
products: [
// ...
]
}
console.log('Shopping Cart Component:')
console.log(cart);
}
profileComponent();
checkoutComponent();
shoppingCartComponent();Local state
Data stored in an individual component
let user = {
name: 'John Doe',
email: 'johndoe@gmail.com'
}
let profileComponent = () => {
const userProfile = {
name: user.name,
email: user.email
}
console.log('Profile Component:');
console.log(userProfile);
}
let checkoutComponent = () => {
const userAddress = {
name: user.name,
email: user.email
}
console.log('Checkout Component:')
console.log(userAddress);
}
let shoppingCartComponent = () => {
const cart = {
user: user.name,
products: [
// ...
]
}
console.log('Shopping Cart Component:')
console.log(cart);
}
profileComponent();
checkoutComponent();
shoppingCartComponent();Redux store
a central, immutable data container that holds all the information about an application’s state. The store is simply a JavaScript object
How does Redux-based data sharing differ from service-based data sharing?
In redux all of the application subscribes to the store instead of individual services
Store organization
- global states - accessible from anywhere in an application and can be accessed by all components. Therefore, we should keep global states in a store
- multicomponent states - state is shared among various application components. Ok to keep state inside of store but if components have a parent-child relationship. we should use prop-lifting or prop-drilling instead
- local states should not be kept inside the store
How does redux decrease HTTP requests
After making the HTTP request we can put the data in the Redux store and retrieve it afterward
pure functions
pure functions always return the same output for the same given arguments
impure function
impure functions generate outputs for the same inputs
side effects
impure functions create side effects. Side effects are any chnages to the state that happen from outside the scope of the function
Reducers in Redux
pure functions that mutate states according to the action’s type
Centralized store benefit
every time the store is updated all the parts are updated accordingly. This makes it easier to pinpoint an issue
