Project 20: Pricing Table

React Engineer

Builds on these lessons

Step 1 of 3

Project

A Redux Slice

Write a pricingSlice with createSlice, an initialState of { selectedPlan: "pro" }, and a reducer selectPlan(state, action) { state.planId = action.payload }. Redux Toolkit's createSlice lets you write what LOOKS like direct mutation inside reducers — it safely converts that into proper immutable updates behind the scenes.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { createSlice } from "@reduxjs/toolkit";

const pricingSlice = createSlice({
  name: "pricing",
  initialState: { selectedPlan: "pro" },
  reducers: {
    selectPlan(state, action) {
      state.selectedPlan = action.payload;
    }
  }
});

export const { selectPlan } = pricingSlice.actions;
export default pricingSlice.reducer;

← Previous Next →