redux 및 redux 툴킷 설치

npm install @reduxjs/toolkit
npm install redux
npm install react-redux


OR

npm install @reduxjs/toolkit react-redux

디렉토리 구조

/app
  layout.tsx
  page.tsx
  StoreProvider.tsx
/lib
  store.ts
  /features
    /todos
      todosSlice.ts
      
      
      
OR

/src
	/redux
    	/slice
        	users.slice.ts
            
        store.tsx

Redux Store 만들기

import { configureStore } from '@reduxjs/toolkit';

export cconst store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer,
  },
})

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch
                                   
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Redux Slice 만들기

import { createSlice } from '@reduxjs/toolkit';

export const yourSlice = createSlice({
  name: 'yourSliceName',
  initialState: {
    // Initial state
  },
  reducers: {
    // Reducers
  },
});

// Action creators are generated for each case reducer function
export const { yourAction } = yourSlice.actions;

export default yourSlice.reducer;

Redux Store Provider 설정

import { AuthProvider } from "@/contexts/auth.context";
import { ReduxProvider } from "@/redux/store";
import ReactQueryProvider from "./reactQuery.provider";

function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ReactQueryProvider>
      <ReduxProvider>
        <AuthProvider>{children}</AuthProvider>
      </ReduxProvider>
    </ReactQueryProvider>
  );
}

export default Providers;

Redux State 및 디스패치 사용

import { useSelector, useDispatch } from 'react-redux';
import { yourAction } from '../store/yourSlice';

function YourComponent() {
  const dispatch = useDispatch();
  const yourState = useSelector((state) => state.yourSliceName);

  const handleAction = () => {
    dispatch(yourAction());
  };

  return (
    // Your JSX
  );
}

//selector

function RootLayout({ children }: { children: React.ReactNode }) {
  const modal = useAppSelector((state) => state.utils.modal);

  return (
    <>
      <Header />
      {children}
      {modal}
    </>
  );
}

// dispatch
function AddToCartButton({ lecture }: AddToCartButtonProps) {
  const dispatch = useAppDispatch();
  const handleClickButton = () => {
    const action = addItem(lecture);
    dispatch(action);
  };

  return <button onClick={handleClickButton}>장바구니에 담기</button>;
}