Redux - Giảm tốc

Giảm thiểu là một chức năng thuần túy trong Redux. Các chức năng thuần túy có thể dự đoán được. Bộ giảm thiểu là cách duy nhất để thay đổi trạng thái trong Redux. Nó là nơi duy nhất mà bạn có thể viết logic và tính toán. Hàm Reducer sẽ chấp nhận trạng thái trước đó của ứng dụng và hành động đang được gửi đi, tính toán trạng thái tiếp theo và trả về đối tượng mới.

Một số điều sau không bao giờ được thực hiện bên trong bộ giảm tốc:

Sự thay đổi các đối số của hàm
Lệnh gọi API và logic định tuyến
Gọi hàm không thuần túy, ví dụ Math.random ()

Sau đây là cú pháp của một bộ rút gọn:

(state,action) => newState

Hãy để chúng tôi tiếp tục ví dụ về hiển thị danh sách các mặt hàng sản phẩm trên trang web, được thảo luận trong mô-đun người tạo hành động. Hãy để chúng tôi xem bên dưới làm thế nào để viết giảm thiểu của nó.

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;

Thứ nhất, nếu bạn không đặt trạng thái thành 'InitialState', Redux sẽ gọi trình giảm thiểu với trạng thái không xác định. Trong ví dụ mã này, hàm concat () của JavaScript được sử dụng trong 'ITEMS_REQUEST_SUCCESS', hàm này không thay đổi mảng hiện có; thay vào đó trả về một mảng mới.

Bằng cách này, bạn có thể tránh được sự đột biến của trạng thái. Không bao giờ viết trực tiếp cho tiểu bang. Trong 'ITEMS_REQUEST', chúng tôi phải đặt giá trị trạng thái từ hành động nhận được.

Người ta đã thảo luận rằng chúng ta có thể viết logic của mình trong bộ giảm thiểu và có thể phân chia nó trên cơ sở dữ liệu logic. Hãy để chúng tôi xem cách chúng tôi có thể tách các bộ giảm thiểu và kết hợp chúng với nhau làm bộ giảm tốc gốc khi xử lý một ứng dụng lớn.

Giả sử, chúng tôi muốn thiết kế một trang web nơi người dùng có thể truy cập trạng thái đơn đặt hàng sản phẩm và xem thông tin danh sách yêu thích. Chúng tôi có thể phân tách logic trong các tệp giảm bớt khác nhau và làm cho chúng hoạt động độc lập. Chúng tôi giả định rằng hành động GET_ORDER_STATUS được thực hiện để nhận trạng thái của đơn đặt hàng tương ứng với một số id đơn đặt hàng và id người dùng.

/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;
   }
}

Tương tự, giả sử hành động GET_WISHLIST_ITEMS được thực hiện để lấy thông tin danh sách yêu thích của người dùng tương ứng với người dùng.

/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;
   }
}

Bây giờ, chúng ta có thể kết hợp cả hai bộ giảm bằng cách sử dụng tiện ích Redux connectReducers. Các hàm kết hợp tạo ra một hàm trả về một đối tượng có giá trị là các hàm rút gọn khác nhau. Bạn có thể nhập tất cả các bộ giảm trong tệp giảm chỉ mục và kết hợp chúng với nhau thành một đối tượng với tên tương ứng của chúng.

/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;

Bây giờ, bạn có thể chuyển rootReducer này vào phương thức createStore như sau:

const store = createStore(rootReducer);