[React Native Expo] redux toolkit 상태관리 적용하기

설치

npm install @reduxjs/toolkit react-redux

 

디렉토리를 아래와같이 추가한다.

//store/index.ts

import { configureStore } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import rootReducer from "./reducer";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware();
  },
});
export default store;

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

// store/reducer.ts

import { combineReducers } from "redux";

import statusSlice from "@/slices/status";

const rootReducer = combineReducers({
  user: statusSlice.reducer,
});

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

// slices/status.ts

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

const initialState = {
  loggedIn: false,
};
const statusSlice = createSlice({
  name: "status",
  initialState,
  reducers: {
    setModal(state, action) {
      state.loggedIn = action.payload;
    },
  },
  extraReducers: (builder) => {},
});

export default statusSlice;

 

일단 loggedIn 로그인여부를 상태관리할거라 status slice를 만들어줬다. 여기서 로그인이나 액세스토큰, 모달 여부 등 저장할거임

slices 디렉토리안에서 만든 슬라이스를 reducer로 연결해주고 index에 연결해준다

export type RootState = ReturnType<typeof rootReducer>; << 얘네는 타입때문에 선언해준건데 이걸 안해주면 타입에러가난다

타입스크립트는 분명 개발자를 위해서 쓰는걸텐데 왜 항상 더 귀찮지..?

 

  import { Provider } from "react-redux";
  import store from "@/store/index";

  <Provider store={store}>
    <Slot />
  </Provider>

그러고 layout.tsx나 app.js에서 Provider로 연결해준다

** 주의할점 store는 저 provider를 선언해준 파일 안의 컴포넌트파일부터 적용된다.

한마디로

import { Provider,useSelector } from "react-redux";
import store from "@/store/index";

function Layout(){
  const loggedIn = useSelector((state: RootState) => state.status.loggedIn);
	return(
      <Provider store={store}>
        <Slot />
      </Provider>
    )
}

이렇게 적용해봤자 작동안한다 loggedIn 상태 못가져온다.

//Layout.tsx

import { Provider } from "react-redux";
import store from "@/store/index";
import InnerLayout from "./InnerLayout.tsx";

function Layout(){
	return(
      <Provider store={store}>
        <InnerLayout />
      </Provider>
    )
}

//InnerLayout.tsx

import { useSelector } from "react-redux";
import { RootState } from "@/store/reducer";
import { View,Text } from "react-native";

function InnerLayout(){
  const loggedIn = useSelector((state: RootState) => state.user.loggedIn);
	return(
    	<View>
        	<Text>{loggedIn}</Text>
        </View>
    )
}

이렇게 나눠서 적용해줘야 작동한다.

 

그리고 상태관리 변경은

import { useDispatch, useSelector } from "react-redux";
import statusSlice from "@/slices/status";

const dispatch = useDispatch();

const onLogin = useCallback(() => {
 dispatch(statusSlice.actions.setLoggedIn(true));
}, [userEmail, userPassword]);

뭐 이런식으로 써주면된다.