Difference between revisions of "Redux + React with Redux Toolkit"

Revision as of 15:39, 2 February 2026

Installing

bun add @reduxjs/toolkit

Creating Slices (/src/store/project.js)

import { createSlice } from '@reduxjs/toolkit'

let lastId = 0;

const slice = createSlice ({
  name: 'projects'
  initialState: [],
  reducers: {
    projectAdded: (projects, action) => {
       projects.push({
         id: ++lastId,
         name: action.payload.name
       })
    }
  }
})
export { projectAdded } = slice.actions;
export default slice.reducer;

Configure Store (/src/store/configureStore)

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./projects"

export default function() {
  return configureStore({ reducer })
}

/src/index.js

import configureStore from "./store/configureStore"
import * as actions from "./store/bugs"
import {projectAdded} from "./store/projects"

const store = configureStore()

store.subscribe(() => {
  console.log("Store changed ");
});

store.dispatch(actions.bugAdded({ description: "Bug 1"})

store.dispatch(projectAdded({ name: "Project 1"})

console.log(store.getState());