Redux는 React에서만 쓰는것이 아니라 상태관리에 도움을 주는 것으로 자바스크립트에서도 당연히 쓰이는데, 컴포넌트화 하는 React에 잘 어울리는것
파랑박스인 React Components(혹은 View, 사용자, UI 등으로 표현됨)에서 Action 생성된 것을 dispatch(action(xxx))
와 같이 호출함.
Action 함수에서 정의된 Type에 의해 Reducers가 state를 새로운 state로 갱신하여 1개의 store에 저장하여 상태를 관리하는 것.
export const loginUser = async(dataToSubmit: MRegisterUser) => {
const request = await ApiService.loginUser(dataToSubmit)
return {
type: LOGIN_USER,
payload: request
}
}
다른 컴포넌트에서 사용할 수 있도록 액션. 즉, "무슨 행동" 을 하는지 지정해주는것을 의미하는 키워드
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
의 결과값을 추가 갱신해주는 개념으로 생각하면 좋겠다
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()