Redux toolkit basic setup baby.

You can setup your dir structure however you want. src ├ app │ ├ layout.js │ │ ├ redux │ │ │ ├ provider.js │ │ │ └ store │ │ │ ├ index.js │ │ │ └slices │ │ │ └ userSlice.js ... other dirs slices/userSlice.js import { createSlice } from '@reduxjs/toolkit' const initialState = { user: {}, isLoggedIn: false } const userSlice = createSlice({ name: 'user', initialState, reducers: { setUser: (state, action) => { state.user = action.payload }, setIsLoggedIn: (state, action) => { state.isLoggedIn = action.payload } }, }) export const { setUser, setIsLoggedIn } = userSlice.actions const userReducer = userSlice.reducer export default userReducer store/index.js -> store.js 'use client' import { configureStore } from "@reduxjs/toolkit" import userReducer from "./slices/userSlice" export const store = configureStore({ reducer: { user: userReducer } }) redux/provider.jsx 'use client' const { Provider } = require("react-redux") const { store } = require("./store") const ReduxProvider = ({ children }) => {children} export default ReduxProvider app/layout.js //other imports import ReduxProvider from "./redux/provider"; // ... other code export default function RootLayout({ children }) { return ( {children} );

Feb 12, 2025 - 04:51

You can setup your dir structure however you want.

src
├ app
│ ├ layout.js
│ │ ├ redux
│ │ │ ├ provider.js
│ │ │ └ store
│ │ │   ├ index.js
│ │ │   └slices
│ │ │      └ userSlice.js
... other dirs

slices/userSlice.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = { user: {}, isLoggedIn: false }

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload
    },
    setIsLoggedIn: (state, action) => {
      state.isLoggedIn = action.payload
    }
  },
})

export const { setUser, setIsLoggedIn } = userSlice.actions
const userReducer = userSlice.reducer
export default userReducer

store/index.js -> store.js

'use client'
import { configureStore } from "@reduxjs/toolkit"
import userReducer from "./slices/userSlice"
export const store = configureStore({
  reducer: {
    user: userReducer
  }
})

redux/provider.jsx

'use client'

const { Provider } = require("react-redux")
const { store } = require("./store")

const ReduxProvider = ({ children }) =>
  <Provider store={store}>
    {children}
  </Provider>

export default ReduxProvider

app/layout.js

//other imports
import ReduxProvider from "./redux/provider";
// ... other code
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className='...'>
        <ReduxProvider>
            {children}
        ReduxProvider>
      body>
    html>
  );