Design of Redux middleware with focus on return values

Question

Design of Redux middleware with focus on return values

I just finished learning about redux middleware, and it seems really useful. However, I have a question regarding the return values of middleware.

I understand that some middleware return values (such as redux-promise), while others like logging do not - they simply return the result of next(action).

My concern is what happens if I want to use two middleware that both return values - won't they interfere with each other and only provide the output of the outermost middleware?

express/connect middleware deals with this by allowing middleware to write their "results" to the req and res objects, but what is the solution in the context of redux?

EDIT

Let me give you a specific example of my dilemma:

I am using two pieces of middleware:

A middleware that delays all dispatched actions by 3 seconds. This middleware returns a function that can be used to cancel the dispatch.
Another middleware that simply returns the number 5 for a specific purpose.

Depending on how I chain these two middleware components, the output of my dispatch(action) will either be the cancellation function or the number 5. But is there a way to obtain both of these results simultaneously?

javascript redux middleware redux-promise

Answer 1

Answer №1

Below is a fully executable script that showcases the issue I am attempting (and struggling) to articulate. It also presents a potential resolution (utilizing a middleware wrapper). I'm open to discovering more refined solutions if they exist...

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

// The genesis function creates an object to pass through the middleware chain, gathering results along the way
const genesis = _store => next => action => {
    next(action);
    return {};
};

// Middleware wrapper function encapsulates the logic of extracting and appending results 
const wrapper = (key, mware) => store => next => action => {

    let extractedResult;
    function modifiedNext(action) {
        extractedResult = next(action);
        return extractedResult;
    }

    let newResult = mware(store)(modifiedNext)(action);
    extractedResult[key] = newResult;
    return extractedResult;
};

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

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

// Reducer function for a simple counter incrementer
function reducer(state = 0, action) {
    if (action.type === "INC")
        return state + 1;
    return state;
}

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

// Output will be only 4 (result of outermost middleware)
// The result from gimme(5) middleware is lost
console.log(dispatchResult);

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

// Now we get { g4: 4, g5: 5 }
// Both middleware results are preserved
console.log(dispatchResult);

Answer 2

Below is a fully executable script that showcases the issue I am attempting (and struggling) to articulate. It also presents a potential resolution (utilizing a middleware wrapper). I'm open to discovering more refined solutions if they exist...

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

// The genesis function creates an object to pass through the middleware chain, gathering results along the way
const genesis = _store => next => action => {
    next(action);
    return {};
};

// Middleware wrapper function encapsulates the logic of extracting and appending results 
const wrapper = (key, mware) => store => next => action => {

    let extractedResult;
    function modifiedNext(action) {
        extractedResult = next(action);
        return extractedResult;
    }

    let newResult = mware(store)(modifiedNext)(action);
    extractedResult[key] = newResult;
    return extractedResult;
};

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

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

// Reducer function for a simple counter incrementer
function reducer(state = 0, action) {
    if (action.type === "INC")
        return state + 1;
    return state;
}

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

// Output will be only 4 (result of outermost middleware)
// The result from gimme(5) middleware is lost
console.log(dispatchResult);

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

// Now we get { g4: 4, g5: 5 }
// Both middleware results are preserved
console.log(dispatchResult);

Answer 3

Answer №2

Learn more about the concept of applyMiddleware by checking out the documentation. It emphasizes how middlewares should be designed to seamlessly integrate into a chain of actions, allowing them to function independently without being affected by what comes before or after:

One of the main benefits of middleware is its composability. Different middleware can be combined together with each one not needing any prior knowledge of the others in the sequence.

The documentation provides thorough insight into the parameters required for middleware and the expected output returned by it.

https://redux.js.org/api/applyMiddleware

Answer 4

Learn more about the concept of applyMiddleware by checking out the documentation. It emphasizes how middlewares should be designed to seamlessly integrate into a chain of actions, allowing them to function independently without being affected by what comes before or after:

One of the main benefits of middleware is its composability. Different middleware can be combined together with each one not needing any prior knowledge of the others in the sequence.

The documentation provides thorough insight into the parameters required for middleware and the expected output returned by it.

https://redux.js.org/api/applyMiddleware

Answer 5

Answer №3

The true essence of Middleware lies in its role as a conduit for processing and executing actions. The focus is on the flow of data rather than individual return values.

Answer 6

The true essence of Middleware lies in its role as a conduit for processing and executing actions. The focus is on the flow of data rather than individual return values.

Design of Redux middleware with focus on return values

Answer №1

Answer №2

Answer №3

Similar questions

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

Stopping an AngularJS timeout from running

Combining React with a jQuery plugin

Create a nested array of subcategories within an array object

Retrieving QueryString from Request or JavaScript

Using jQuery, retrieve the "select" element within a specific row of a

Is there a different method I can utilize to create a conditional statement for assigning a value in JavaScript?

Refreshing a Nested Component Within a Parent Component in React

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

Implementing automatic redirection upon clicking using React without the need for manual clicking

What is the proper way to type a collection and put it into action?

Error: The property 'create' of undefined cannot be read (Material UI/enzyme)

Tips for incorporating confidence intervals into a line graph using (React) ApexCharts

`There is a delay in rendering the background image on Chrome`

AngularJS Currency Converter - Converting Currencies with Ease

What is the best way to remove text from a box when a user clicks on it?

The Viadeo Social Toolbox seems to be encountering technical difficulties at the moment

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

Choose all checkboxes across the entire webpage

Exploring the use of jQuery/JS for parsing and working with JSON