Built with React, Redux, Redux-Saga.
- Redux store runs the root reducer function and saves the returned value as the initial state.
- UI components subscribe to store.
- When an Event occurs, the Event Handler dispatches an action to the store.
- The store runs the root reducer function with the state and current action, and saves the returned value as new state.
- The store notifies components that are subscribed to it that the state has changed.
- Each component checks if the parts of the state that it needs have changed and accordingly re-renders with the new data.
compose()
is used to apply multiple store enhancers (e.g. middleware, time travel, persistence).applyMiddleware()
is the only enhancer that ships with Redux.connected-react-router
provides Redux bindings for React Router synchronizes router state with redux store through uni-directional flow (history -> store -> router -> components).
- Used to save and load Redux state to and from LocalStorage.
- Dynamic pieces of the URL passed to a component can be accessed via
match.params
. Instead, useuseParams
hook.
- Used to synchronize router state with redux store.
- To navigate with Redux action, use
store.dispatch(push('/path/to/somewhere'))
oryield put(push('/home))
in a saga.
Boolean()
converts value passes as param to a bool. Returnsfalse
if the value is omitted,0, -0, null, false, NaN, undefined
, or the empty string ("").Object.values(obj)
returns an array of the obj's values.typeof operand
returns a string indicating the type of the unevaluated operand.lodash
library makes it easier to work with arrays, numbers, objects, strings, etc.array.forEach(callbackFunction())
- Convert class components to functions using Hooks.
- Wrap actions within functions to abstract away object creation.
- Put all action types in actions/constants.js
- Replace
className
with styled components.