Model shared application updates as state transitions.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

Redux gives an application a store. Components dispatch actions; reducers calculate new state; selectors read the fields a component needs. Redux Toolkit is the recommended way to write modern Redux. The idea remains the same as your earlier reducer lesson, with a store that multiple features can consume.

Your assignments share a small set of operations: increment likes, set a rating, append a student, add/update a cart line, toggle a todo, add a blog entry, update a cricket score and reorder records. Define a small action for each intent and keep record IDs stable. Store data, not JSX; derive counts and totals with selectors.

User action ↓ Dispatch ↓ Reducer → new state ↓ Selector → UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

npm install @reduxjs/toolkit react-redux

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';
const cart = createSlice({name: 'cart', initialState: [], reducers: {
  add(state, action) {
    const existing = state.find(p => p.id === action.payload.id);
    if (existing) existing.quantity += 1;
    else state.push({...action.payload, quantity: 1});
  },
  decrease(state, action) {
    const item = state.find(p => p.id === action.payload);
    if (item && item.quantity > 1) item.quantity -= 1;
    else return state.filter(p => p.id !== action.payload);
  }
}});
const store = configureStore({reducer: {cart: cart.reducer}});
function Shop() {
  const items = useSelector(state => state.cart); const dispatch = useDispatch();
  return <main><button onClick={() => dispatch(cart.actions.add({id: 'pen', name: 'Pen', price: 20}))}>Add pen</button>
    <ul>{items.map(p => <li key={p.id}>{p.name}: {p.quantity}<button onClick={() => dispatch(cart.actions.decrease(p.id))}>Decrease</button></li>)}</ul>
    <p>Items: {items.reduce((sum, p) => sum + p.quantity, 0)}; total: ₹{items.reduce((sum, p) => sum + p.quantity * p.price, 0)}</p>
  </main>;
}
export default function App() { return <Provider store={store}><Shop /></Provider>; }

Apply this to your assignments

Install @reduxjs/toolkit and react-redux. Reuse this action/reducer/selector flow for all nine assignments. Likes: separate counters; rating: bounded 0–5 value; students/blog: records with IDs; todos: done flag and toggle/delete; cricket: runs and wickets; reorder: swap neighbors after checking boundaries. For blogs, store an image URL rather than a DOM node or File in Redux.

Your existing examples

• Create a react app for registering likes and dislikes.
• Create a react app for registering ratings(5 star)
• Create a react app to enter the student details and display them in a table
• Create a react app to add items to a cart and increase and decrease the number of individual items and also show the total price
• Create a react app to show a todo list with done, undo and delete button.
• Create a react app for creating a blog which lets us enter content and an image.
• Create a react app to display the score of a cricket match.
• Create a react app to display a list of items and move the items up and down(change the index) using an up and down arrow.

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet and submission controls.

Common mistakes

The mutation-like syntax above works inside createSlice through Immer. Plain Redux reducers must return immutable updates. Do not recreate the store inside App.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements