Redux 정리

https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6
참고한 블로그

Redux는 React에서만 쓰는것이 아니라 상태관리에 도움을 주는 것으로 자바스크립트에서도 당연히 쓰이는데, 컴포넌트화 하는 React에 잘 어울리는것

위 그림 출처
https://wooder2050.medium.com/%EB%A6%AC%EB%8D%95%EC%8A%A4-redux-%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94-%EA%B1%B4%EB%8D%B0-2eaafce30f27

0. 흐름

파랑박스인 React Components(혹은 View, 사용자, UI 등으로 표현됨)에서 Action 생성된 것을 dispatch(action(xxx))와 같이 호출함.
Action 함수에서 정의된 Type에 의해 Reducers가 state를 새로운 state로 갱신하여 1개의 store에 저장하여 상태를 관리하는 것.

1. 키워드

Action

export const loginUser = async(dataToSubmit: MRegisterUser) => {
    const request = await ApiService.loginUser(dataToSubmit)

    return {
        type: LOGIN_USER,
        payload: request
    }
}

다른 컴포넌트에서 사용할 수 있도록 액션. 즉, "무슨 행동" 을 하는지 지정해주는것을 의미하는 키워드

Reducer

function user(state: MUser = initialState, action: MUserAction){
    switch(action.type){
        case REGISTER_USER:
            return {...state, register: action.payload }
        case LOGIN_USER:
            return { ...state, loginSucces: action.payload }
        case AUTH_USER:
            return {...state, userData: action.payload }
        case LOGOUT_USER:
            return {...state }
        default:
            return state;
    }
}

액션에서 정의한 타입에 따라 case별로 실제로 변화를 일으키는 함수
{...state, xxx} 기존의 state를 그대로 가져오고, action.payload의 결과값을 추가 갱신해주는 개념으로 생각하면 좋겠다

Store

import { combineReducers } from 'redux'
import user from './user'
import polyline from './polyline'
import progress from './progress'

const rootReducer = combineReducers({
    user,
    polyline,
    progress
})

export default rootReducer

export type RootState = ReturnType<typeof rootReducer>

리듀서들을 하나로 합쳐서 1개의 store로 관리할 수 있다
store.getState()