redux - redux-tollkit 사용법

김종민·2023년 3월 11일
0
  1. 상태관리를 위해 아래와 같이store.tsx파일을 만들어준다
const store = configureStore({
      reducer:{
          alert:alertReducer
      }
    }
)

const createStroe = ()=> store

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

const wrapper = createWrapper(createStroe)

export default wrapper
  1. 위의 reducer는 아래의 코드와 같이 구성해준다
import {createSlice} from "@reduxjs/toolkit";

interface initialStateValueIF{
    alertMsg:string
    alertOpen:string
}

const initialStateValue:initialStateValueIF = {alertMsg:"none",alertOpen:"none"}

export const AlertSlice = createSlice({
    name:"alertCheck",
    initialState:{value:initialStateValue},
    reducers:{
        alertDone : (state,action)=>{
            state.value = action.payload
        }
    }
})


export const {alertDone} = AlertSlice.actions;

export default AlertSlice.reducer;
  1. app.ts로 이동하여 아래와 같이 wrapper.withRedux로 MyApp을 감싸준다.
import wrapper from "../store/store";

export default wrapper.withRedux(MyApp);
profile
개발을 합시다 :)

0개의 댓글