제목: Redux 리듀서 내에서 상태에 접근하는 방법
소개:
Redux를 사용할 때 현재 리듀서 외부에서 상태에 접근해야 하는 경우가 있습니다. 이는 약간 어려울 수 있지만 걱정 마세요! 이 글에서는 Redux 리듀서 내에서 상태에 접근하는 다양한 기법을 살펴보겠습니다.
1. Thunk 미들웨어 사용:
Redux 리듀서 내에서 상태에 접근하는 한 가지 방법은 Thunk 미들웨어를 사용하는 것입니다. Thunk는 지연 액션의 생성을 허용하여 현재 상태에 접근할 수 있게 해줍니다. 다음은 예시입니다:
export function updateProduct(product) {
return (dispatch, getState) => {
const { accountDetails } = getState();
dispatch({
type: "UPDATE_PRODUCT",
stateOfResidenceId: accountDetails.stateOfResidenceId,
product,
});
};
}
위 코드에서 우리는 Thunk 미들웨어에서 제공하는 getState 함수를 사용하여 현재 상태에 접근합니다. 그리고 우리는 이 상태에서 accountDetails.stateOfResidenceId 필드를 추출하고 디스패치된 액션에 포함시킵니다.
2. 커스텀 리듀서 조합:
다른 옵션으로는 원하는 상태에 접근할 수 있는 커스텀 리듀서 조합 함수를 만드는 것입니다. 다음은 예시입니다:
const rootReducer = (state, action) => {
const newState = {};
newState.accountDetails = accountDetails(state.accountDetails, action);
newState.forms = forms(state.forms, action, state.accountDetails);
return newState;
};
export default rootReducer;
rootReducer 함수에서 우리는 accountDetails와 forms 리듀서를 조합합니다. 이렇게 함으로써 forms 리듀서에서 accountDetails 상태에 접근할 수 있게 되며, stateOfResidenceId 필드에 접근할 수 있습니다.
3. 상태를 페이로드로 전달:
더 간단한 접근 방법을 선호한다면 외부 상태를 액션의 페이로드로 전달할 수 있습니다. 다음은 예시입니다:
export const updateProduct = (stateOfResidenceId, product) => ({
type: "UPDATE_PRODUCT",
stateOfResidenceId,
product,
});
이 경우에는 stateOfResidenceId를 액션 생성자의 매개변수로 전달합니다. 액션을 트리거할 때는 mapStateToProps를 사용하여 필요한 상태에 접근하고 이를 액션 생성자에 전달할 수 있습니다.
결론:
Redux 리듀서 내에서 상태에 접근하기 위해서는 combineReducers 방식을 넘어 추가적인 기법이 필요합니다. 이 글에서는 Thunk 미들웨어 사용, 커스텀 리듀서 조합, 액션의 페이로드로 상태 전달 등 다양한 방법을 살펴보았습니다. 이러한 기법을 구현함으로써 필요한 상태에 쉽게 접근하고 새로운 상태를 효과적으로 계산할 수 있습니다. 즐거운 코딩 되세요!
참고 자료 :
https://stackoverflow.com/questions/39257740/how-to-access-state-inside-redux-reducer
같은 카테고리의 다른 글 보기 :
