React Reducer Correct Way To Return An Array With State

Question

I am using axios in the action creator and redux-promise middleware to return an array of objects to a map function in the render method of my component. When using the first return statement with ES6 spread, I get an array within an array. How would I properly iterate through this array? Would I use map in the reducer? The second return statement works. I am unclear as to why I wouldn't want just return the array by itself. Thanks!!

const INITIAL_STATE = [];

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_TICKET:
            return [action.payload.data, ...state];
            return action.payload.data;
        default:
            return state;
    }
}

What is action.payload.data in this case? Is it also an array? If so, how do you want the two arrays to be combined order-wise? — markerikson
– markerikson, Commented Sep 6, 2018 at 16:05
Yes, action.payload.data is an array. I would like to return the network request plus the empty state. When I do "[ ...state, action.payload.data ] I get an array with an array. How and where would I iterate through this? Thanks! — UHFCaffeine
– UHFCaffeine, Commented Sep 6, 2018 at 16:09
This will help you :) stackoverflow.com/questions/52036143/… — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Sep 6, 2018 at 16:13
Has anyone found a way, where reducer sends the same array referencing to same memory address as earllier, instead of creating a new array, referencing to different memory heap address ? — Abir
– Abir, Commented Mar 30, 2023 at 19:20

markerikson · Accepted Answer · 2018-09-06 16:16:17Z

2

There's two main ways to combine two arrays into one:

const newArray = [...firstArray, ...secondArray];
// or
const newArray = firstArray.concat(secondArray);

Either of those will work in your case, like:

return state.concat(action.payload.data);

answered Sep 6, 2018 at 16:16

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

UHFCaffeine Over a year ago

Thanks Mark!...that makes more sense. Can you tell me why one might use the [...state, action.payload.data] approach?

markerikson Over a year ago

Both are valid ways to combine two arrays. The array spread syntax is newer, and part of the ES6 language specification.

UHFCaffeine Over a year ago

Understand the array combination. Understand that we shouldn't mutate the state. Don't understand why I would use return state.concat(action.payload.data); vs return action.payload.data; What "magic" is redux doing behind the scenes with state if I don't combine the arrays?

markerikson Over a year ago

Those are two different commands. return action.payload.data only returns the array that was in the action. return state.concat(action.payload.data) returns a new array with all of the contents of the old array, plus the contents of data. There's no magic - it's just a question of whether you want to replace the existing state with this data array, or add the contents of data array to the existing state.

markerikson Over a year ago

Also, there truly is no "magic" in Redux. It's your reducer function - Redux simply saves whatever values your code returns. You might want to look through some of the slides in my Redux Fundamentals workshop to see what goes on inside (which is very little - it's really just newState = rootReducer(oldState, action) ).

|

rmcsharry · Accepted Answer · 2019-09-30 11:04:47Z

1

you can follow this format

const INITIAL_STATE = { myData : [] };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_TICKET:
            return {
               ...state, 
               myData: [...myData, ...action.payload.data]
            };
        default:
            return state;
    }
}

EDIT

Enhanced this answer to illustrate what the OP meant, taken from the accepted answer:

[...firstArray, ...secondArray]

edited Sep 30, 2019 at 11:04

rmcsharry

5,58111 gold badges74 silver badges118 bronze badges

answered Sep 6, 2018 at 16:08

Amruth

5,9122 gold badges30 silver badges41 bronze badges

1 Comment

markerikson Over a year ago

Not quite what the OP was looking for in terms of state structure or return values.

Collectives™ on Stack Overflow

React Reducer Correct Way To Return An Array With State

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related