Redux-감속기

리듀서는 Redux의 순수한 기능입니다. 순수 함수는 예측 가능합니다. Reducer는 Redux에서 상태를 변경하는 유일한 방법입니다. 논리와 계산을 작성할 수있는 유일한 곳입니다. Reducer 함수는 전달되는 앱 및 작업의 이전 상태를 수락하고 다음 상태를 계산하고 새 개체를 반환합니다.

감속기 내부에서 다음 몇 가지 작업을 수행해서는 안됩니다.

함수 인수의 변형
API 호출 및 라우팅 로직
순수하지 않은 함수 호출, 예 : Math.random ()

다음은 감속기의 구문입니다-

(state,action) => newState

액션 생성자 모듈에서 논의 된 웹 페이지에 제품 항목 목록을 표시하는 예제를 계속해 보겠습니다. 감속기를 작성하는 방법을 아래에서 보겠습니다.

const initialState = {
   isLoading: false,
   items: []
};
const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS':
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

첫째, state를 'initialState'로 설정하지 않으면 Redux는 정의되지 않은 상태로 reducer를 호출합니다. 이 코드 예제에서는 기존 배열을 변경하지 않는 'ITEMS_REQUEST_SUCCESS'에서 JavaScript의 concat () 함수를 사용합니다. 대신 새 배열을 반환합니다.

이런 식으로 상태의 변이를 피할 수 있습니다. 주에 직접 쓰지 마십시오. 'ITEMS_REQUEST'에서는 수신 된 액션의 상태 값을 설정해야합니다.

리듀서에서 로직을 작성하고 논리 데이터 기반으로 분할 할 수 있다는 것은 이미 논의되었습니다. 리듀서를 분할하여 대규모 애플리케이션을 다룰 때 루트 리듀서로 결합하는 방법을 살펴 보겠습니다.

사용자가 제품 주문 상태에 액세스하고 위시리스트 정보를 볼 수있는 웹 페이지를 디자인한다고 가정 해 보겠습니다. 다른 리듀서 파일에서 로직을 분리하여 독립적으로 작동하도록 만들 수 있습니다. 일부 주문 ID 및 사용자 ID에 해당하는 주문 상태를 가져 오기 위해 GET_ORDER_STATUS 액션이 전달되었다고 가정하겠습니다.

/reducer/orderStatusReducer.js
import { GET_ORDER_STATUS } from ‘../constants/appConstant’;
export default function (state = {} , action) {
   switch(action.type) {
      case GET_ORDER_STATUS:
         return { ...state, orderStatusData: action.payload.orderStatus };
      default:
         return state;
   }
}

마찬가지로, GET_WISHLIST_ITEMS 액션이 사용자 각각의 위시리스트 정보를 얻기 위해 전달되었다고 가정합니다.

/reducer/getWishlistDataReducer.js
import { GET_WISHLIST_ITEMS } from ‘../constants/appConstant’;
export default function (state = {}, action) {
   switch(action.type) {
      case GET_WISHLIST_ITEMS:
         return { ...state, wishlistData: action.payload.wishlistData };
      default:
         return state;
   }
}

이제 Redux combineReducers 유틸리티를 사용하여 두 감속기를 결합 할 수 있습니다. combineReducers는 값이 다른 감속기 함수 인 객체를 반환하는 함수를 생성합니다. 인덱스 감속기 파일의 모든 감속기를 가져 와서 각각의 이름을 가진 객체로 결합 할 수 있습니다.

/reducer/index.js
import { combineReducers } from ‘redux’;
import OrderStatusReducer from ‘./orderStatusReducer’;
import GetWishlistDataReducer from ‘./getWishlistDataReducer’;

const rootReducer = combineReducers ({
   orderStatusReducer: OrderStatusReducer,
   getWishlistDataReducer: GetWishlistDataReducer
});
export default rootReducer;

이제이 rootReducer를 다음과 같이 createStore 메소드에 전달할 수 있습니다.

const store = createStore(rootReducer);