How to combine react-hooks, redux and typescript all together?

Question

I have been trying to combine React-hooks, Redux and Typescript. Every time I fix an error, a new one appears.

Can anyone see what the issue seems to be?

Right now I get the following error about my reducer:

Unhandled Rejection (TypeError): action.places is not iterable

Without typescript, this code works. So I should be missing something or doing something wrong type-wise.

// Types

export interface Place {
  type: string;
  geometry: Geometry;
  properties: Properties;
  id: number;
}

interface Geometry {
  type: string;
  coordinates: [number, number];
}

interface Properties {
  Id: string;
  Title: string;
  Url: string;
  ImageUrl: string;
  Bullets: boolean;
}


export const FETCH_DATA: string = "FETCH_DATA";

export interface FetchDataAction {
  type: typeof FETCH_DATA;
  places: Place[];
}

export type PlaceActionTypes = FetchDataAction;

export type AppActions = PlaceActionTypes;

// Action
// places = axios.create({baseURL}) (the API is an array of type Place[])

export const fetchPlaces = () => async (dispatch: Dispatch) => {
  const response = await places.get(`places`);

  dispatch({
    type: "FETCH_DATA",
    payload: response.data
  });
};

// Reducer

export const initialState: Place[] = [];

const placeReducer = (state = initialState, action: PlaceActionTypes) => {
  switch (action.type) {
    case FETCH_DATA:
      return [...state, ...action.places];

    default:
      return state;
  }
};



// Here is my Component

const HomePage = () => {
  const places: Place[] = useSelector((state: any) => state.places);
  const dispatch = useDispatch();

  useEffect(() => {
    places.length === 0 && dispatch(fetchPlaces());
  });

  console.log(places);

  return <div>HomePage</div>;
};

The only Error I have right now is the following error: "Unhandled Rejection (TypeError): action.places is not iterable". It refers to the return of my placeReducer: case FETCH_DATA. The [(...state,) ...action.places] is not iterable — Stefan Reusens
– Stefan Reusens, Commented Aug 12, 2019 at 15:37

raman · Accepted Answer · 2019-08-12 15:48:31Z

Its an error while using spread operator.

In your code you attempt to spread an object using the syntax intended for iterable objects. The correct syntax for object spread is const cloneObject = {...originalObject}; which essentially iterates over the keys of the original object and copies the original's key/value pairs into a new object literal.

From MDN

For function calls: myFunction(...iterableObject);

For array literals or strings: [...iterableObject, 'one', '2', 'three'];

For object literals (new in ECMAScript 2018): let objectClone = { ...object };

So in the reducer, the return should be an object. If you want an array then, you can create it after you create an object

const placeReducer = (state = initialState, action: PlaceActionTypes) => {
  switch (action.type) {
    case FETCH_DATA:
      return {...state, ...action.places};

    default:
      return state;
  }
};

Collectives™ on Stack Overflow

How to combine react-hooks, redux and typescript all together?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related