너무 너무 궁금했던 부분!!!!!!

리액트를 공부하면서 기존에 리덕스를 사용하지 않고 리액트 훅만으로 페이지를 만드려고 했을 때는, 계속해서 각 컴포넌트 별로 usehistory를 통해 로그인한 정보를 가지고 페이지 이동을 해주었었다.

그러다 보니 코드도 복잡해지지만 페이지 이동 경로가 달라지면 다시 로그인 정보를 잃어버리기도 하고, 상태관리의 중요성을 여실히 느꼈다. 물론 내 실력이 부족해서 코드를 잘 작성하지 못했겠지만, 리덕스를 사용해 어떻게 상태관리를 하고 로그인 페이지 > 메인페이지 이동 > 마이페이지에서 로그인한 유저의 정보 불러오기를 할 수 있는지가 정말 정말 궁금했다.

dispatch

app.js

import { useDispatch, useSelector} from 'react-redux';
import {setUser} from './redux/actions/user_action';

function App(props) {
  let history = useHistory();
  let dispatch = useDispatch();

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
      console.log('user', user)
      if(user) {
        history.push('/');
        dispatch(setUser(user)
      } else {
        history.push('/login');
      }
    })
  },[])

dispatch로 setUser함수 보내기
setUser함수는?

action

user_action.js - setUser

import { SET_USER } from './types';

export function setUser(user) {
return {
  type: SET_USER,
  payload: user
}
}

setUser함수의 type값인 SET_USER는 types.js에서 정의해 임포트 한다.

types.js

export const SET_USER = 'set_user';

index.js

import {combineReducers} from 'redux';
import user from './user_reducer';
const rootReducer = combineReducers){
	user,
})
export default rootReducer;

reducer

user_reducer.js

import { SET_USER } from '../actions/types';

const initialUserState = {
  currentUser: null,
  isLoading: true
}

export default function(state = initialUserState, action) {
  switch(action.type) {
    case SET_USER:
      return {
        ...state,
        currentUser: action.payload,
        isLoading: false
      }

      default:
        return state;
  }
}