Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Redux adding extra field for action cause promise to return differently

I want to add a isLoading flag to my action generator and reset it at my reducer. Initially without the flag, my code works and the action looks like the following

export function getList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_LIST, 
        payload: request,
    }
}

and reducer looks like

const INITIAL_STATE = { all: [], id: -1, isLoading: false };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case FETCH_COMIC_LIST: 
            console.log('reducer action =', action, 'state =', state)
            return {
                ...state, 
                all: action.payload.data.data.results,
                isLoading: false
            }
        default:
            return state;
    }
}

Good result

As you can see, the object returns fine and I can get my list via action.payload.data.data.results

Note that I am using redux promise as my middleware to handle the promise.

As soon as I changed my action to the following and re run the code I get my payload (as shown in image below) to be a Promise rather than the object that was returned

export function getComicList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_COMIC_LIST, 
        isLoading: true, 
        payload: request,
    }
}

isLoading added

Why is simply adding another variable causing this problem??

like image 513
ErnieKev Avatar asked Oct 29 '22 08:10

ErnieKev


1 Answers

Redux Promise and Redux Promise Middleware are both compliant with Flux Standard Action (FSA). Add a meta key to the action and assign your key/value pairs within it.

Related question/answer: https://stackoverflow.com/a/35362148/4290174

From the FSA documentation:

The optional meta property MAY be any type of value. It is intended for any extra information that is not part of the payload.

like image 102
Lush Avatar answered Nov 24 '22 13:11

Lush