Redux Basics, ppt for small tech talk

1. Redux – Global State(The Sin)?

2. Sin Is It Really
Global Variable is difficult to manage
Redux only allows you to change it through
actions(close to api calls)
Think of it like in-memory database, rather
than a simple variable

3. One Direction Flow
Mechanism
Action Creator Store Reducers
UI Component
dispatch(action
)
(previousState,
action)
(newState
)
(state)
(data
)

4. Action Creator
Your normal functions with a twist
Always returns an object that necessarily
contains a type of action
Any other key in return object corresponds to
data being sent to the store
Actions are object that contain an intention to
change the state

5. Reducer
Reducers basically take previousState and
an action and return the next state.
Reducers are part of core functional
programming.
In OOP terms, think of it like as a class where
previousState corresponds to your properties
and action is your function that changes the
object.

6. Dispatcher
Dispatcher accepts an action(sync/async)
and sends it to the store.
Sync is direct possible using redux.
Async functions need a middleware to create
actions at appropriate steps, a common
example are API calls

7. Store
Store is where all your global state is saved
to be accessible by all your UI components
There should only be one store in a single
app, as reducers are composable from other
reducers to support a highly nested state
object

8. UI Rerender
Redux follows Immutability principle and thus
each time an action is dispatched the reducer
sends back a new object instead of modifying
the old one.
Thus there is only a need to check the
reference of the state at the appropriate levels
to know which components to re-render. Thus
there is no need for expensive deep checking.