Redux toolkit basic setup baby.

This content originally appeared on DEV Community and was authored by Kb Bohara

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

This content originally appeared on DEV Community and was authored by Kb Bohara

Print Share Comment Cite Upload Translate Updates

APA

Kb Bohara | Sciencx (2025-02-12T03:11:09+00:00) Redux toolkit basic setup baby.. Retrieved from https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/

MLA

" » Redux toolkit basic setup baby.." Kb Bohara | Sciencx - Wednesday February 12, 2025, https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/

HARVARD

Kb Bohara | Sciencx Wednesday February 12, 2025 » Redux toolkit basic setup baby.., viewed ,<https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/>

VANCOUVER

Kb Bohara | Sciencx - » Redux toolkit basic setup baby.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/

CHICAGO

" » Redux toolkit basic setup baby.." Kb Bohara | Sciencx - Accessed . https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/

IEEE

" » Redux toolkit basic setup baby.." Kb Bohara | Sciencx [Online]. Available: https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/. [Accessed: ]

rf:citation

» Redux toolkit basic setup baby. | Kb Bohara | Sciencx | https://www.scien.cx/2025/02/12/redux-toolkit-basic-setup-baby/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts