Complete Guide to Redux

Your Name

May 2, 2025

Your Name Complete Guide to Redux May 2, 2025 1 / 21

Introduction to Redux

Redux is a predictable state container for JavaScript apps.

Commonly used with React but works with other frameworks.
Key Principles:
Single source of truth (Store)
State is read-only (change via Actions)
Changes are made with pure Reducers

Your Name Complete Guide to Redux May 2, 2025 2 / 21

Redux Basics: Core Concepts

Store: Holds the entire state of the app.

Action: An object describing what happened.
Reducer: A pure function that updates the state based on actions.
Dispatch: Sends actions to the store to update state.

Your Name Complete Guide to Redux May 2, 2025 3 / 21

 Redux Basics: Code Example

1 ype: INCREMENT
2 // Reducer const initialState = count: 0 ; const counterReducer = (state =
initialState, action) => switch (action.type) case INCREMENT: return
...state, count: state.count + 1 ; default: return state; ;
3 // Store import createStore from ’redux’; const store =
createStore(counterReducer);
4 // Dispatch store.dispatch(increment()); console.log(store.getState()); //
count: 1

Your Name Complete Guide to Redux May 2, 2025 4 / 21

React-Redux Integration

Provider: Makes the Redux store available to React components.

useSelector: Access state from the store.
useDispatch: Dispatch actions to the store.

Your Name Complete Guide to Redux May 2, 2025 5 / 21

 React-Redux: Code Example

5 rovider
6 const App = () => ( <Provider store=store> <Counter /> </Provider> );
7 // Counter.js import useSelector, useDispatch from ’react-redux’;
8 const Counter = () => const count = useSelector(state => state.count); const
dispatch = useDispatch(); return ( <div> <p>Count: count</p> <button onClick=()
=> dispatch(increment())>Increment</button> </div> ); ;

Your Name Complete Guide to Redux May 2, 2025 6 / 21

Redux Thunk: Async Actions

Middleware for handling asynchronous logic.

Action creators return a function instead of an object.
Useful for API calls, timeouts, etc.

Your Name Complete Guide to Redux May 2, 2025 7 / 21

 Redux Thunk: Code Example

9 eturn async (dispatch) => dispatch( type:

’FETCHS TART ); try constresponse = awaitfetch(https : //api.example.com/data); constdata = awai
10 // Store with Thunk Middleware import createStore, applyMiddleware from
’redux’; import thunk from ’redux-thunk’; import rootReducer from ’./reducers’;
11 const store = createStore(rootReducer, applyMiddleware(thunk));
12 // Dispatch Async Action store.dispatch(fetchData());

Your Name Complete Guide to Redux May 2, 2025 8 / 21

Persistence in Redux

Use redux-persist to save state across page reloads.

Persists state to localStorage (or other storage).
Rehydrates state when the app reloads.

Your Name Complete Guide to Redux May 2, 2025 9 / 21

 Persistence: Code Example

13 reateStore ersistStore, persistReducer

14 const persistConfig = key: ’root’, storage, ;
15 const persistedReducer = persistReducer(persistConfig, rootReducer); const store
= createStore(persistedReducer); const persistor = persistStore(store);
16 export store, persistor ;
17 // App.js import PersistGate from ’redux-persist/integration/react’;
18 const App = () => ( <Provider store=store> <PersistGate loading=null
persistor=persistor> <Counter /> </PersistGate> </Provider> );

Your Name Complete Guide to Redux May 2, 2025 10 / 21

Redux Toolkit

Official toolset to simplify Redux development.

Includes createSlice, configureStore.
Reduces boilerplate and includes Redux Thunk by default.

Your Name Complete Guide to Redux May 2, 2025 11 / 21

 Redux Toolkit: Code Example

19 reateSlice
20 const counterSlice = createSlice( name: ’counter’, initialState: count: 0 ,
reducers: increment(state) state.count += 1; , decrement(state) state.count
-= 1; , , );
21 export const increment, decrement = counterSlice.actions; export default
counterSlice.reducer;
22 // store.js import configureStore from ’@reduxjs/toolkit’; import
counterReducer from ’./counterSlice’;
23 const store = configureStore( reducer: counter: counterReducer, , );
24 export default store;

Your Name Complete Guide to Redux May 2, 2025 12 / 21

TypeScript with Redux

Adds type safety to Redux actions, state, and reducers.

Define interfaces for actions and state.

Your Name Complete Guide to Redux May 2, 2025 13 / 21

 TypeScript with Redux: Code Example

25 ount: number;
26 interface IncrementAction type: ’INCREMENT’;
27 type CounterAction = IncrementAction;
28 // reducer.ts const initialState: CounterState = count: 0 ;
29 const counterReducer = (state: CounterState = initialState, action:
CounterAction): CounterState => switch (action.type) case ’INCREMENT’: return
...state, count: state.count + 1 ; default: return state; ;
30 // store.ts import createStore from ’redux’; const store =
createStore(counterReducer);

Your Name Complete Guide to Redux May 2, 2025 14 / 21

Middleware: Redux Logger

Middleware enhances the Redux store.

redux-logger logs actions and state changes for debugging.

Your Name Complete Guide to Redux May 2, 2025 15 / 21

 Middleware: Code Example

31 reateStore, applyMiddleware
32 const store = createStore(rootReducer, applyMiddleware(logger));
33 // Usage store.dispatch(increment()); // Logger will log: // prev state:
count: 0 // action: type: ’INCREMENT’ // next state: count: 1

Your Name Complete Guide to Redux May 2, 2025 16 / 21

State Management Patterns

useState: Local component state.

useReducer: Manage complex state logic.
Redux: Global state management for larger apps.

Your Name Complete Guide to Redux May 2, 2025 17 / 21

 State Management: Code Example

34 seState onst [count, setCount] = useState(0); return ( <div> <p>Count:

count</p> <button onClick=() => setCount(count + 1)>Increment</button> </div> );
35 // useReducer Example import useReducer from ’react’; const initialState =
count: 0 ; const reducer = (state, action) => switch (action.type) case
’INCREMENT’: return count: state.count + 1 ; default: return state; ;
36 const Counter = () => const [state, dispatch] = useReducer(reducer,
initialState); return ( <div> <p>Count: state.count</p> <button onClick=() =>
dispatch( type: ’INCREMENT’ )>Increment</button> </div> ); ;

Your Name Complete Guide to Redux May 2, 2025 18 / 21

Synchronous vs Asynchronous Actions

Sync Actions: Immediately dispatch and update state.

Async Actions: Use middleware (like Redux Thunk) to handle delays
or API calls.

Your Name Complete Guide to Redux May 2, 2025 19 / 21

 Sync vs Async: Code Example

37 ype: ’INCREMENT’
38 // Asynchronous Action (with Thunk) const fetchData = () => return async
(dispatch) => dispatch( type:
’FETCHS TART ); constresponse = awaitfetch(https : //api.example.com/data); constdata =
awaitresponse.json(); dispatch(type : FETCHS UCCESS, payload : data); ; ; store.dispatch(fetchData(
39

Your Name Complete Guide to Redux May 2, 2025 20 / 21

Conclusion

Redux provides a predictable state management solution.

Use React-Redux for integration with React apps.
Redux Thunk for async actions, Redux Persist for persistence.
Redux Toolkit simplifies setup, TypeScript adds type safety.
Middleware like redux-logger helps with debugging.

Your Name Complete Guide to Redux May 2, 2025 21 / 21