소개 (Isomorphic Redux 어플리케이션에서 쿠키를 설정하는 위치)
서버와 클라이언트 측에서 매끄럽게 실행될 수 있는 덕분에 이소 미적 응용 프로그램 또는 통합 응용 프로그램은 인기를 얻고 있습니다. 상태 관리 라이브러리인 Redux는 이소 미적 응용 프로그램 구축에 핵심적인 역할을 합니다. 이소 미적 응용 프로그램에서 Redux를 사용할 때 나타나는 일반적인 질문 중 하나는 어디에 Cookie를 설정해야 할지입니다. 이 문서에서는 이소 미적 Redux 응용 프로그램에서 Cookie를 설정하기 위한 다양한 접근 방식을 살펴보겠습니다.
접근 방식 1: 액션 생성자에 Cookie 저장하기
첫 번째 접근 방식에서는 Redux 액션 생성자에 Cookie를 저장합니다. 이렇게 함으로써 리듀서를 순수 함수로 유지하여 테스트하기 쉽게 만들 수 있습니다. 이를 위해 사용자 인증 프로미스가 해결된 후에 Cookie 저장 액션을 디스패치하는 방법이 있습니다. 이렇게 함으로써 필요할 때만 Cookie가 설정되고 불필요한 부작용을 피할 수 있습니다.
const setCookie = (key, value) => {
// Cookie를 설정하는 코드
};
const signInUser = (credentials) => {
return (dispatch) => {
// 사용자 인증을 위한 코드
// 인증된 후에 Cookie 설정
setCookie('token', credentials.token);
dispatch({ type: 'USER_AUTHENTICATED' });
};
};
접근 방식 2: 메타 리듀서 사용하기
두 번째 접근 방식에서는 메타 리듀서를 이용하여 Cookie 저장을 처리할 수 있습니다. 메타 리듀서는 다른 리듀서의 동작을 수정하는 고차 리듀서입니다. 리듀서를 메타 리듀서로 래핑함으로써 Redux store에 Cookie를 언제, 어떻게 저장할지를 제어할 수 있습니다.
import { createStore, combineReducers } from 'redux';
import Cookie from 'js-cookie';
const persistedState = Cookie.getJSON('todos');
const todoReducer = (state, action) => {
// Redux 리듀서 로직
};
const cookieMetaReducer = (reducer) => {
return function(state, action) {
let nextState = reducer(state, action);
let cookieState = Cookie.getJSON('todos');
// 쿠키를 삭제하는 액션을 확인합니다.
if (action.type.includes('DELETE')) {
Cookie.remove('todos');
}
// nextState가 존재하고 cookieState와 다른 경우를 확인합니다.
else if (nextState && nextState !== cookieState) {
Cookie.set('todos', nextState);
}
return nextState;
};
};
const rootReducer = combineReducers({
todos: cookieMetaReducer(todoReducer)
});
const store = createStore(rootReducer, persistedState);
결론
이소 미적 Redux 응용 프로그램에서 Cookie를 어디에 설정할지 결정하는 것은 일관된 사용자 경험을 유지하는 데 중요합니다. 이 문서에서 설명한 두 가지 접근 방식 중 하나를 구현함으로써 쿠키가 적절하게 저장되고 Redux 리듀서가 순수 함수로 유지될 수 있습니다. 응용 프로그램의 요구 사항과 코딩 스타일에 가장 적합한 접근 방식을 선택하세요.
참고 자료:
참고 자료 :
https://stackoverflow.com/questions/34821742/where-to-set-cookie-in-isomorphic-redux-application
같은 카테고리의 다른 글 보기 :
