RangeError: Maximum call stack size exceeded when dispatching action

Question

I have changed my es6 classes to functions, and now get the above error when I try and dispatch an action in my child component, passed down as a prop. Any ideas?

Container:

import {bookmarkVideo} from '../actions/videos';
export default function VideoPlayerScreen(props) {

  const dispatch = useDispatch();
  ...

  const bookmarkVideo = id => {
    dispatch(bookmarkVideo(id));
    navigate('Video Player');
  };

  return (
    <>
          <VideoPlayerHeader
            {...videoProps}
            onClick={bookmarkVideo}
          />
            ...
            </View>

Child:

export default function VideoPlayerHeader(props) {
    let {title, bookMarked, icon, id, onClick} = props;

    return (
            <View style={styles.rightContainer}>
                <TouchableHighlight onPress={() => onClick(id)}> // dispatch action

Videos.js:

export const bookmarkVideo = video => ({
    type: "BOOKMARK_VIDEO",
    video
});

Check the updated answer please – Francisco Jun 04 '20 at 13:21 — Francisco, Jun 04 '20 at 13:21

Francisco · Accepted Answer · 2020-06-04T14:13:22.547

1

Dispatch function receive an object as a first parameter, and that object needs to have a type and a payload according to redux conventions.

I think you get that error because you have a recurrence issue. You are calling the same function again and again.

export default function VideoPlayerScreen(props) {

  const dispatch = useDispatch();
  ...

  const bookmarkVideo = id => {
    dispatch({
      type: 'BOOKMARK_VIDEO',
      payload: id
    });
    navigate('Video Player');
  };

  return (
    <>
      <VideoPlayerHeader
        {...videoProps}
        onClick={bookmarkVideo}
      />
        ...
    </>
  );
}

Please check the documentation for more information Hooks · React Redux

Also this answer may be useful. Maximum call stack size exceeded error

edited Jun 04 '20 at 14:13

answered Jun 04 '20 at 12:04

Francisco

1,748
1
17
19

I have passed the function as you describe and still get the error – Bomber Jun 04 '20 at 12:41
How can I import my action from a different file? I've edited the question – Bomber Jun 05 '20 at 08:33
Actions are just Javascript plain objects, you can import and export using ES6 modules. Check this web for more info https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export – Francisco Jun 05 '20 at 14:59

RangeError: Maximum call stack size exceeded when dispatching action

1 Answers1