DEV Community

Kb Bohara
Kb Bohara

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • store/index.js -> store.js 
'use client' import { configureStore } from "@reduxjs/toolkit" import userReducer from "./slices/userSlice" export const store = configureStore({ reducer: { user: userReducer } })
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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> );
Enter fullscreen mode Exit fullscreen mode

Top comments (0)