React Redux topicks in React js
React and Redux cover a lot of important concepts that can help you build robust and scalable applications. Here are some key topics to focus on in React and Redux:
React Topics
JSX
- Syntax, embedding expressions, conditionals, lists, etc.
Components and Props
- Function vs. class components
- Passing props, destructuring props, default props
State Management
- Local state with
useState
anduseReducer
- Handling forms, conditional rendering based on state
- Local state with
Lifecycle and Effects
useEffect
for side effects- Component lifecycle: mount, update, unmount
React Context API
- Creating and providing context
- Consuming context with
useContext
React Router
- Setting up routes with
react-router-dom
- Dynamic routing, nested routes, and redirects
- Setting up routes with
Error Boundaries
- Handling errors in class components using
componentDidCatch
- Handling errors in class components using
Performance Optimization
React.memo
,useCallback
,useMemo
for memoization- Code-splitting with React.lazy and Suspense
Refs
useRef
for accessing DOM elements- Persisting state across renders
Custom Hooks
- Creating reusable logic with custom hooks
- Organizing hooks effectively
Redux Topics
Redux Basics
- Actions, reducers, store
- Dispatching actions and updating state
React-Redux Integration
Provider
for making Redux store available to the appuseSelector
anduseDispatch
hooks for state and actions
Redux Toolkit
- Setting up slices and store with
configureStore
- Creating actions and reducers in slices
- Setting up slices and store with
Async Actions (Redux Thunk)
- Handling async operations with
redux-thunk
- Dispatching actions in async functions
- Handling async operations with
Redux DevTools
- Setting up and using Redux DevTools for debugging
Redux Middleware
- Writing custom middleware for handling side effects
Normalization of State
- Structuring state to avoid deeply nested data
- Using libraries like
normalizr
for complex state
Entity Management
- Managing entities (collections) and pagination
- Memoizing selectors for efficient state reading
Re-select
- Creating memoized selectors for derived state
- Avoiding unnecessary re-renders with
reselect
Testing Redux
- Testing actions, reducers, and selectors