React · Theory

Redux in React

Theory

39/94

Redux in React

Redux is a predictable state container: one store, reducers are pure (state, action) => newState, you dispatch actions. UI subscribes. It’s Flux-shaped. You do not need Redux for a counter. You consider it when many distant screens share complex state (cart + checkout + admin) and you want time-travel/debug tools.

Modern Redux: Redux Toolkit (configureStore, createSlice). Don’t teach 2016 switch-statement boilerplate as ‘how we write Redux now’. Context+useReducer can cover smaller apps.

Redux in React — output — 1. dispatch({type:'inc'}) → reducer → new state → UI. Never mutate the old state.

Diagram

view click
      │ dispatch
      ▼
   reducer
      │ new state
      ▼
     store → UI

Exam tip

When Redux vs useState/Context. Mention RTK.

Example

// Redux idea
function reducer(state, action) {
  if (action.type === "inc") return { n: state.n + 1 };
  return state;
}
let state = { n: 0 };
state = reducer(state, { type: "inc" });
console.log(state.n);

Redux in React — output: 1. dispatch({type:'inc'}) → reducer → new state → UI. Never mutate the old state.

Short notes

Defstore + pure reducer + dispatch.
Now : Redux Toolkit.
Skip : tiny local state.

React · Theory

Redux in React

← All stacks

Theory

39/94

Redux in React

Modern Redux: Redux Toolkit (configureStore, createSlice). Don’t teach 2016 switch-statement boilerplate as ‘how we write Redux now’. Context+useReducer can cover smaller apps.

Redux in React — output — 1. dispatch({type:'inc'}) → reducer → new state → UI. Never mutate the old state.

Diagram

view click
      │ dispatch
      ▼
   reducer
      │ new state
      ▼
     store → UI

Exam tip

When Redux vs useState/Context. Mention RTK.

Example

// Redux idea
function reducer(state, action) {
  if (action.type === "inc") return { n: state.n + 1 };
  return state;
}
let state = { n: 0 };
state = reducer(state, { type: "inc" });
console.log(state.n);

Redux in React — output: 1. dispatch({type:'inc'}) → reducer → new state → UI. Never mutate the old state.

Short notes

Defstore + pure reducer + dispatch.
Now : Redux Toolkit.
Skip : tiny local state.

Redux in React

Example

Short notes

Questions

Redux in React

Example

Short notes

Questions