Redux-미들웨어
Redux 자체는 동기식이므로 async 같은 작업 network requestRedux와 함께 일하십니까? 여기서 미들웨어가 편리합니다. 앞서 논의했듯이 리듀서는 모든 실행 로직이 작성되는 곳입니다. Reducer는 작업을 수행하는 사람, 작업이 전달되기 전과 후에 앱의 상태를 기록하는 데 걸리는 시간과 관련이 없습니다.
이 경우 Redux 미들웨어 기능은 리듀서에 도달하기 전에 디스패치 된 액션과 상호 작용할 수있는 매체를 제공합니다. 사용자 정의 된 미들웨어 함수는 일부 논리를 감싸는 고차 함수 (다른 함수를 반환하는 함수)를 작성하여 만들 수 있습니다. 여러 미들웨어를 함께 결합하여 새로운 기능을 추가 할 수 있으며, 각 미들웨어는 이전과 이후에 무엇이 왔는지 알 필요가 없습니다. 액션 디스패치와 리듀서 사이 어딘가에 미들웨어를 상상할 수 있습니다.
일반적으로 미들웨어는 앱에서 비동기 작업을 처리하는 데 사용됩니다. Redux는 사용자 지정 미들웨어와 redux-thunk 및 redux-promise와 같은 Redux 미들웨어를 사용할 수있는 applyMiddleware라는 API를 제공합니다. 스토어에 미들웨어를 적용합니다. applyMiddleware API를 사용하는 구문은 다음과 같습니다.
applyMiddleware(...middleware)
그리고 이것은 다음과 같이 저장에 적용될 수 있습니다.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));
미들웨어를 사용하면 액션 객체 대신 함수를 반환하는 액션 디스패처를 작성할 수 있습니다. 동일한 예가 아래에 나와 있습니다.
function getUser() {
return function() {
return axios.get('/get_user_details');
};
}
조건부 디스패치는 미들웨어 내부에 작성 될 수 있습니다. 각 미들웨어는 새로운 액션을 디스패치 할 수 있도록 스토어의 디스패치를 수신하고, 현재 상태에 액세스하고 함수를 반환 할 수 있도록 getState 함수를 인수로받습니다. 내부 함수의 반환 값은 디스패치 함수 자체의 값으로 사용할 수 있습니다.
다음은 미들웨어의 구문입니다-
({ getState, dispatch }) => next => action
getState 함수는 현재 상태에 따라 새 데이터를 가져올 지 아니면 캐시 결과를 반환 할지를 결정하는 데 유용합니다.
커스텀 미들웨어 로거 기능의 예를 보겠습니다. 단순히 작업과 새 상태를 기록합니다.
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;
}
}
이제 다음 코드 줄을 작성하여 로거 미들웨어를 상점에 적용하십시오.
const store = createStore(userLogin , initialState=[ ] , applyMiddleware(logger));
아래 코드를 사용하여 발송 된 액션과 새로운 상태를 확인하는 액션을 발송합니다.
store.dispatch({
type: 'ITEMS_REQUEST',
isLoading: true
})
로더를 표시하거나 숨길 때 처리 할 수있는 미들웨어의 또 다른 예는 다음과 같습니다. 이 미들웨어는 리소스를 요청할 때 로더를 표시하고 리소스 요청이 완료되면이를 숨 깁니다.
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)
);