Redux - Redux Toolkit 작업

 

 

components에게 로그인한 유저 정보를 제공하기 위해 redux 사용.

 

 

 

모든 component들이 사용할 수 있게  App에 Provider로 감싸줍니다.

 

  const root = ReactDOM.createRoot(document.getElementById("root"));

  root.render(

    <BrowserRouter>

      <Provider store={store}>

        <App />

      </Provider>

    </BrowserRouter>

  );

 

 

 

 

 

userSlice 작업 (createSlice)

createSlice로 reducer에 action과 payload등의 데이터를 쉽게 설정 가능.

createSlice를 통해 3개의 데이터 관리 (displayName, uid, accessToken)

 

   export const userSlice = createSlice({

     name: "user",

     initialState: {

       displayName: "",

       uid: "",

       accessToken: "",

     },

     reducers: {

       //로그인시에 데이터

       loginUser: (state, action) => {

         state.displayName = action.payload.displayName;

         state.uid = action.payload.uid;

         state.accessToken = action.payload.accessToken;

       },

       //user 로그아웃시에 값 초기화

       clearUser: (state) => {

         state.displayName = "";

         state.uid = "";

       },

     },

   });

 

   export const { loginUser, clearUser } = userSlice.actions;

   export default userSlice.reducer;

 

 

 

 

firebase에서 제공하는 onAuthStateChanged() (사용자의 상태 변화에 따라 추적해주는 함수)를

사용하여 dispatch로 store에 정보를 보내줍니다.

사용자가 로그인(firebase auth) 기능을 사용시 store에 저장.

 

// const user = useSelector((state) => state.user);

  const dispatch = useDispatch();

  // console.log(user.displayName);

  useEffect(() => {

    //*onAuthStateChanged firebase사용자의 상태 변화에 따라 추적 함수..

    firebase.auth().onAuthStateChanged((userInfo) => {

      //photoURL로 사용자img 줄수있음..firebase.auth자체기능

      // console.log(userInfo);

      //사용자 로그아웃 or 로그인하지 않은 상태라면 -> null값

      //로그인했다면 로그인한 데이터를 보여줌

      userInfo

        ? //true시에 user 정보 store로 정보 보냅니다.

          dispatch(loginUser(userInfo.multiFactor.user))

        : //false면 유저 정보 비워줍니다.

          dispatch(clearUser());

    });

  }, []);

 

 

 

 

client(store)에러발생 작업 코드

   

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

   import userSlice from "./userSlice";

   

   

   export default configureStore({

     reducer: {

       user: userSlice,

     },

   });

 

 

 

 

 

 콘솔로 확인시에는 user정보는 담겨있습니다..

 

 

검색을 해보니 직렬화 관련 문제?!

 

직렬화란?

javascript에서 사용하는 데이터 타입은 주로 object이다. 하지만 이 자바스크립트 오브젝트가 다른 언어나 다른환경에서도 똑같이 사용될수 있을까? 간단한 예로는 localstorage가 있다.

localstorage는 값으로 string을 가질수 있지만 object는 가질수 없다.

이럴때 우리는 json.stringify를 통해서 object를 스트링화 한다. 이것이 직렬화다. 

 

참조

https://ymc-crow.github.io/basic/redux%EC%99%80-serializable/

redux와 serializable

 

 you should be able to configure the middleare to remove the serilizable check or ignore specific actions

'직렬화 가능 검사를 제거하거나 특정 작업을 무시하도록 구성할 수 있어야 합니다' 라고 얘기하네요..

 

 

 

1. 비활성화 코드

import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'

export const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false,
  }),
})

 

 

2. 특정 작업 비활성화 코드 

import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
import { actionTypes } from 'react-redux-firebase'

export const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
        ignoredActions: [actionTypes.LOGIN]
    }
  }),
})

 

 

 

최종 수정 코드 

저는 1번으로 임시해결!! 

 

  // userSlice 작업 후 아래 추가한 뒤에 useSelecter로 user정보 불러오기 가능

  export default configureStore({

    reducer: { userSlice },

    //redux-toolkit 비직렬화 데이터를 보내면 에러 발생 아래 코드로 에러 안뜨게 임시해결..

    middleware: (getDefaultMiddleware) =>

      getDefaultMiddleware({

        serializableCheck: false,

      }),

  });

 

 

 

 

 

참고

https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%95%BC-%EA%B3%A0%EB%A7%99%EB%8B%A4-Redux-Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기

공식문서

https://redux-toolkit.js.org/tutorials/quick-start

Quick Start | Redux Toolkit