Redux 미들웨어 디자인 re : return values ​​

Question

그래서 저는 redux 미들웨어를 읽었습니다. 한 가지는 미안하다 - 미들웨어의 반환 값.

미들웨어의 일부 인스턴스가 물건 (즉, redux-promise)을 반환하고 다른 미들웨어 (예 : logging)가 표시되지 않으며 단순히 next(action)의 결과를 반환하는 것으로 알고 있습니다.

두 가지 모두를 반환하는 미들웨어 두 개를 사용하고 싶다면 내 문제가 발생합니다. 확실히 서로 충돌하게되고 가장 외부 미들웨어의 반환 값만 가져옵니다.

express/connect 미들웨어는 미들웨어가 req 및 res 개체에 "결과"를 쓰게함으로써 이것을 해결하지만 redux를 사용하는 솔루션은 무엇입니까?

편집 여기

내 문제의보다 구체적인 예는 다음과 같습니다

내가 미들웨어의 두 가지가 있습니다 모든 작업을 3 초에서 전달되는 연기

1. 미들웨어를. 이 미들웨어는 디스패치를 ​​취소하기 위해 호출 할 수있는 함수를 반환합니다.
2. 어떤 이유로 든 숫자 5가 필요하기 때문에 숫자 5를 반환하는 미들웨어입니다.

순서 나는 결과를 미들웨어의 두 비트를 체인에 따라 내 dispatch(action) 연기 취소 FN, 또는 5 번을 것 중 하나 그러나 어떻게 이러한 결과를 모두받을 수 있나요?

Answer 1

applyMiddleware의 설명서를 살펴보십시오.

미들웨어의 핵심적인 특징이 있다는 것이다 : 그것은 그것이 미들웨어 체인에 연결되도록 미들웨어가 먼저 적용되는 미들웨어 걱정없이 후 작성 가능으로 기록 될 것을 설명 구성 가능합니다. 미들웨어를 여러 개 결합 할 수 있습니다. 각 미들웨어에는 체인의 전후에 오는 정보가 필요하지 않습니다.

문서는 미들웨어에 전달 될 인수와 예상되는 반환 값을 설명하는 매우 훌륭한 작업을 수행합니다.

http://redux.js.org/docs/api/applyMiddleware.html

Answer 2

그래서 아래에 내가 설명하려고 (그리고 실패)있어 문제를 보여줍니다 실행 가능한 스크립트입니다. 또한 잠재적 솔루션 (미들웨어 랩퍼 사용)도 포함됩니다. 귀하의 예를 읽은 후 .... 더 우아한 해결책이 거기 밖으로 있는지 알고

var { createStore, applyMiddleware } = require("redux"); 
var dispatchResult; 

// create the results object to be passed along the middleware chain, collecting 
// results as it goes 
const genesis = _store => next => action => { 
    next(action); 
    return {}; 
}; 

const wrapper = (key, mware) => store => next => action => { 

    // extract the results object by storing the result of next(action) 
    // when it is called within the middleware 
    var extractedResult; 
    function modifiedNext(action) { 
     extractedResult = next(action); 
     return extractedResult; 
    } 

    // get the result of this middleware and append it to the results object 
    // then pass on said results object... 
    var newResult = mware(store)(modifiedNext)(action); 
    extractedResult[ key ] = newResult; 
    return extractedResult; 
}; 

// create standard logging middleware 
const logger = store => next => action => { 
    let result = next(action); 
    console.log(`value is: ${ store.getState() }.`); 
    return result; 
}; 

// create middleware that returns a number 
const gimme = val => _store => next => action => { 
    next(action); 
    return val; 
}; 

// create our super simple counter incrementer reduer 
function reducer(state = 0, action) { 
    if(action.type === "INC") 
     return state + 1; 
    return state; 
} 


// first lets try running this without the wrapper: 
dispatchResult = createStore(reducer, applyMiddleware(
    gimme(4), 
    logger, 
    gimme(5) 
)).dispatch({ type : "INC" }); 

// will return only 4 (the result of the outermost middleware) 
// we have lost the 5 from the gimme(5) middleware 
console.log(dispatchResult); 

// now we include the middleware wrapper and genesis middleware 
dispatchResult = createStore(reducer, applyMiddleware(
    wrapper("g4", gimme(4)), 
    logger, 
    wrapper("g5", gimme(5)), 
    genesis 
)).dispatch({ type : "INC" }); 

// we will now return { g4 : 4, g5 : 5 } 
// we have preserved the results of both middlewares 
console.log(dispatchResult); 

Answer 3

를 싶어요, 난 사실 당신이 일반적으로 치료를 할, 당신은 미들웨어의 롤을 이해하지 않았다고 생각하면 미들웨어에서 액션 크리에이터 또는 리듀서로해야합니다.미들웨어는 비동기 API 호출을 포함 가지의 다양한 사용할 수 있지만

는, 그것이 어디에서 오는지 당신이 을 이해하는 것이 정말 중요합니다. 로크 및 충돌보고를 예제로 사용하여 미들웨어로 이끄는 생각 프로세스 을 안내합니다. 거의 작동하도록 설계 방법 돌아 오는 미들웨어의

http://redux.js.org/docs/advanced/Middleware.html