Getting an array from the redux store puts it inside another array

Question

So what I am doing is the following:

An action fetches a .json file from a url and dispatches another action. The value for pilots is [Array(278)].

export const pilotsFetchDataSucces = (pilots) => {
  return {
    type: 'PILOTS_FETCH_DATA_SUCCES',
    pilots
  }
};

export const pilotsFetchData = (url) => (dispatch) => {
  fetch(url)
  .then((response) => {return response.json()})
  .then((pilots) => {
    dispatch(pilotsFetchDataSucces(pilots))
  })
  .catch((e) => {console.log('Error in pilotsFetchData', e)});
};

This is the reducer:

const pilotsReducer = (state = [], action) => {
  switch(action.type){
    case 'PILOTS_FETCH_DATA_SUCCES':
    console.log('pilotsReducer', action.pilots);
    return [
      ...state,
      action.pilots
    ];

    default:
    return state;
  }
}

export default pilotsReducer;

Later in my component I want to access this data. I'm using mapStateToProps.

import React from 'react';
import { connect } from 'react-redux';
import SinglePilot from './SinglePilot.js';
import { pilotsFetchData } from '../actions/pilots';

class Pilots extends React.Component {

  componentDidMount () {
 this.props.fetchData('https://raw.githubusercontent.com/guidokessels/xwing-data/master/data/pilots.js');
  }

  render(){
    return (
      <div>
        <h1>Title</h1>
        {this.props.query && <p>You searched for: {this.props.query}</p>}
        {
          //iterate over all objects in this.props.pilots
          this.props.pilots.map( (pilot) => {
            return (
            <SinglePilot
              key={pilot.id}
              name={pilot.name}
           />
          )})
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
      pilots: state.pilots // is [[Array(278)]] instead of [Array(278)]
    });

const mapDispatchToProps = (dispatch) => ({
  fetchData: (url) => dispatch(pilotsFetchData(url))
});

export default connect(mapStateToProps, mapDispatchToProps)(Pilots);

The problem I have is that the value of state.pilots is now an array of length 1 and the array that I want (with a length of 278) is inside this array.

I know I could fix this by using state.pilots[0], but I don't like that. What is causing my initial pilots array to be wrapped inside another array?

Many thanks for any assistance!

Edit: added the code for the reducer.

Hemerson Carlin · Accepted Answer · 2017-11-17 15:48:59Z

1

As pilots is also an array, you need to spread it as well.

Instead of

return [
  ...state,
  action.pilots
]

return your new state as

return [
  ...state,
  ...action.pilots
]

answered Nov 17, 2017 at 15:48

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

Comments

Karim · Accepted Answer · 2017-11-17 15:48:42Z

0

there's an error when using the spread operator , inside the reducer

return [
      ...state,
      action.pilots
    ];

should be

return [
      ...state,
      ...action.pilots
    ];

answered Nov 17, 2017 at 15:48

Karim

8,6823 gold badges27 silver badges36 bronze badges

Comments

Rmcr714 · Accepted Answer · 2020-11-13 17:31:14Z

this is my state inside reducer

const initialState = {
    loading: false,
    employee: [],
    error: ''
}

this is the reducer

export default function contactData(state = initialState,action)
{
    switch(action.type){
        case FETCH_EMPLOYEE_SUCCESS :
            console.log(state)
            console.log(action.data)
            return {
                ...state,
                 employee:[...state.employee,...action.data]    //correct way to copy action data to employee array in state
            }

            case FETCH_EMPLOYEE_FAIL :
                return {
                    ...state,
                    loading:false,
                    error:action.error
                }

                default:
                    return state
    }
}

the data in action.data

action.data = {[
  {
    "id": 1,
    "name": "Leanne Graham",
    "email": "[email protected]",
    "phone": "1-770-736-8031 x56442",
    "company": {
      "name": "Romaguera-Crona"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "email": "[email protected]",
    "phone": "010-692-6593 x09125",
    "company": {
      "name": "Deckow-Crist"
    }
  }]}

so this action.data is also an array so when i want to put the array type data in action.data to employee array we do like this

return {
               ...state,   
                 employee:[...state.employee,...action.data] 
            }

Collectives™ on Stack Overflow

Getting an array from the redux store puts it inside another array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related