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

DEV Community

Redux toolkit basic setup baby.

Top comments (0)