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 }) =>
  <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>
  );

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →