Redux - Phần mềm trung gian

Bản thân Redux là đồng bộ, vì vậy async hoạt động như network requestlàm việc với Redux? Đây là phần mềm trung gian có ích. Như đã thảo luận trước đó, bộ giảm là nơi ghi tất cả logic thực thi. Reducer không liên quan đến việc ai thực hiện nó, mất bao nhiêu thời gian hoặc ghi trạng thái của ứng dụng trước và sau khi hành động được thực hiện.

Trong trường hợp này, chức năng phần mềm trung gian của Redux cung cấp một phương tiện để tương tác với hành động được gửi đi trước khi chúng tiếp cận trình giảm thiểu. Các chức năng phần mềm trung gian được tùy chỉnh có thể được tạo ra bằng cách viết các hàm bậc cao (một hàm trả về một hàm khác), nó bao quanh một số logic. Nhiều phần mềm trung gian có thể được kết hợp với nhau để thêm chức năng mới và mỗi phần mềm trung gian không yêu cầu kiến thức về những gì xảy ra trước và sau. Bạn có thể tưởng tượng phần mềm trung gian ở đâu đó giữa hành động được gửi đi và trình giảm bớt.

Thông thường, phần mềm trung gian được sử dụng để xử lý các hành động không đồng bộ trong ứng dụng của bạn. Redux cung cấp API được gọi là applyMiddleware cho phép chúng ta sử dụng phần mềm trung gian tùy chỉnh cũng như phần mềm trung gian Redux như redux-thunk và redux-promise. Nó áp dụng phần mềm trung gian để lưu trữ. Cú pháp của việc sử dụng API applyMiddleware là:

applyMiddleware(...middleware)

Và điều này có thể được áp dụng để lưu trữ như sau:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

Phần mềm trung gian sẽ cho phép bạn viết một trình điều phối hành động trả về một hàm thay vì một đối tượng hành động. Ví dụ cho điều tương tự được hiển thị bên dưới -

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Công văn có điều kiện có thể được viết bên trong phần mềm trung gian. Mỗi phần mềm trung gian nhận được công văn của cửa hàng để chúng có thể gửi hành động mới và các hàm getState làm đối số để chúng có thể truy cập trạng thái hiện tại và trả về một hàm. Bất kỳ giá trị trả về nào từ một hàm bên trong sẽ có sẵn dưới dạng giá trị của chính hàm điều phối.

Sau đây là cú pháp của phần mềm trung gian:

({ getState, dispatch }) => next => action

Hàm getState hữu ích để quyết định xem dữ liệu mới sẽ được tìm nạp hay kết quả bộ nhớ cache sẽ được trả về, tùy thuộc vào trạng thái hiện tại.

Hãy để chúng tôi xem một ví dụ về chức năng trình ghi phần mềm trung gian tùy chỉnh. Nó chỉ ghi nhật ký hành động và trạng thái mới.

import { createStore, applyMiddleware } from 'redux'
import userLogin from './reducers'

function logger({ getState }) {
   return next => action => {
      console.log(‘action’, action);
      const returnVal = next(action);
      console.log('state when action is dispatched', getState()); 
      return returnVal;
   }
}

Bây giờ áp dụng phần mềm trung gian của trình ghi nhật ký cho cửa hàng bằng cách viết dòng mã sau:

const store = createStore(userLogin , initialState=[ ] , applyMiddleware(logger));

Gửi một hành động để kiểm tra hành động đã gửi và trạng thái mới bằng cách sử dụng mã bên dưới -

store.dispatch({
   type: 'ITEMS_REQUEST', 
	isLoading: true
})

Một ví dụ khác về phần mềm trung gian nơi bạn có thể xử lý khi nào hiển thị hoặc ẩn bộ nạp được đưa ra bên dưới. Phần mềm trung gian này hiển thị trình tải khi bạn đang yêu cầu bất kỳ tài nguyên nào và ẩn nó khi yêu cầu tài nguyên đã được hoàn thành.

import isPromise from 'is-promise';

function loaderHandler({ dispatch }) {
   return next => action => {
      if (isPromise(action)) {
         dispatch({ type: 'SHOW_LOADER' });
         action
            .then(() => dispatch({ type: 'HIDE_LOADER' }))
            .catch(() => dispatch({ type: 'HIDE_LOADER' }));
      }
      return next(action);
   };
}
const store = createStore(
   userLogin , initialState = [ ] , 
   applyMiddleware(loaderHandler)
);