Redux Flashcards
1
Q
How does Redux work?
A
- Redux is a library for managing and centralizing application state
- State is initialized and updated in a reducer.
- The updates are based upon actions being dispatched by events.
- Each reducer handles its variables and updates separately, however all these reducers are combined into a redux store which is passed to a provider component that wraps the entire application, making the reducers and their state accessible throughout the application
2
Q
What makes Redux so special?
A
- The fact that each and every component, no matter how deeply nested can have direct access to the redux store.
- Instead of passing components variables through callbacks, variables can be stored and retrieved in one place, creating a “single source of truth”
- Instead of updating variables with callback functions and passing down variables from component to component(prop drilling), redux has one parent component which handles all the state management for variables and has a direct link to every component that depends on it for state variables.
3
Q
Redux set up process?
A
- Reducers are created alongside the actions which are used to update the state in the reducers.
- The reducers are then imported and combined into a redux store object.
- The store object is passed as a prop to the Provider component which wraps the entire application.
- There are 2 essential hooks that are part of redux, the useSelector and useDispatch hooks.
- In order to access a state variable, the useSelector hook is used and in order to dispatch an action, the useDispatch hook is used.
4
Q
What are reducers in redux?
A
- Reducers are what initialize and update state
- Functions that implement the behavior of the action that was dispatched based on the action type and payload
- They use a switch statement
5
Q
What are the core principles of Redux?
A
- Single source of truth: global state is stored in an object tree within a single store
- State is read-only: only way to change state is to dispatch an action (object that describes what happens)
- Changes are made with pure functions: Pure functions/reducers take the previous state and action and return the next state. The returned state object is a new state object, previous state should not be mutated
6
Q
How do I make an AJAX request using Redux?
A
- By incorporating a middleware like redux thunk, which allows for the definition of async actions.
- Also redux promise, and redux saga
7
Q
What are the benefits of using Redux DevTools?
A
- The main benefit is debugging:
- You can trace actions and navigate to exact point of codebase
- Time travel is possible by skipping or jumping to an action to analyze behavior
- Custom dispatch to test side effects of dependent actions
- Can be used in production
8
Q
What is redux-thunk?
A
- A middleware which allows you to carry out async functions within redux, commonly used for data fetching
- Lets you call action creators that return a function rather than an action object
- Interacts with a Redux store’s dispatch and getState methods.
9
Q
React context vs Redux
A
- Both context and redux serve as an alternative to prop drilling
- Context is built in tool with minimal setup usually for small scale apps, specifically designed for static data that is not refreshed or updated, debugging can be hard in deeply nested components, UI/state management in same component
- Redux requires additional installation driving up final bundle size and has an extensive setup process so best for large scale apps, works great with dynamic and static data, powerful Redux dev tools for easy debugging, better code organization that separates UI logic from state management logic
10
Q
What is the difference between store and reducer? Action?
A
- Store is the globalized state of your app in the form of an object
- Reducers are functions where the data is manipulated when an action is received
- Actions tell the reducer to manipulate store data via an action type, and sometimes a action payload
