SamwithCode

Redux Toolkit Store Setup 2025

Redux Toolkit Store Setup 2025 🚀

Redux Toolkit is the official, recommended way to write Redux logic. It simplifies store setup and reduces boilerplate code.

🔧 Step-by-Step Store Setup

  1. Install Redux Toolkit & React-Redux:
    npm install @reduxjs/toolkit react-redux
  2. Create a Redux Slice:
    // features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    reset: (state) => { state.value = 0 }
  }
})

export const { increment, decrement, reset } = counterSlice.actions
export default counterSlice.reducer
  3. Configure Store:
    // app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store
  4. Provide Store to Your App:
    // index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './app/store'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  
    
  
)

Your Redux Toolkit store is now ready! 🚀