Actions must be plain objects, use custom middleware for async actions

Question

I get this error when I try and use my async action, how can use an async in my action?:

export async function bookmarkVideo(video) {
    const bookmarkedArray = (await AsyncStorage.getItem("bookmarked")) || [];

    if (bookmarkedArray === undefined || bookmarkedArray.length == 0) {
        bookmarkedArray.push(video);
        return dispatch => {
            dispatch(bookmarkSuccess(bookmarkedArray));
        };
    }
}

Container:

class VideoPlayerScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.bookmarkVideo = this.bookmarkVideo.bind(this);
  }

  bookmarkVideo() {
    const { bookmarkVideo, id } = this.props;

    bookmarkVideo(id);
  }

  render() {
    ...

    const newProps = { ...videoProps, url };
    return (
      <View style={styles.container}>
        <VideoPlayerHeader {...videoProps} onClick={this.bookmarkVideo} />
        ...
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  bookmarkVideo: id => dispatch(bookmarkVideo(id))
});

const mapStateToProps = state => {
  return {
    videos: state.videos
  };
};

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

Component:

export default class VideoPlayerHeader extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        let { onClick, id } = this.props;

        onClick(id);
    }

    render() {
        let { title } = this.props;
        return (
            <View style={styles.navBar}>
            ...
                <View style={styles.rightContainer}>
                    <TouchableHighlight onPress={this.handleClick}>
                    ...
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

Store:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import logger from "redux-logger";
import rootReducer from "../reducers";

const initialState = {
    videos: []
};

const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk, logger)
);

export default store;

UPDATE:

I get video undefined in my action:

export function bookmarkVideo(video) {

   // video undefined

    return async function(dispatch) {
        const bookmarkedArray = (await AsyncStorage.getItem("bookmarked")) || [];

        if (bookmarkedArray === undefined || bookmarkedArray.length == 0) {
            bookmarkedArray.push(video);
            // undefined 
            console.log('array', bookmarkedArray)
            dispatch(bookmarkSuccess(bookmarkedArray));
        }
    }
}

can you share more code i mean your store creation – Hardik Virani Jun 07 '19 at 11:02 — Hardik Virani, Jun 07 '19 at 11:02

score 2 · Answer 1 · answered Jun 07 '19 at 11:12

Replace your action method. use below syntax to creating redux actions.

export const bookmarkVideo = async (video) => {
    const bookmarkedArray = (await AsyncStorage.getItem("bookmarked")) || [];

    if (bookmarkedArray === undefined || bookmarkedArray.length == 0) {
        bookmarkedArray.push(video);
        return dispatch => {
            dispatch(bookmarkSuccess(bookmarkedArray));
        };
    }
}

refer this post it will get to idea how it works.

@Bomber can let me know it helped you ? – Hardik Virani Jun 07 '19 at 11:45 — Hardik Virani, Jun 07 '19 at 11:45

score 1 · Accepted Answer · answered Jun 07 '19 at 11:15

1

When you are using thunk (or any middleware) and async action, you should return function from your action like this -

export function bookmarkVideo(video) {
    return async function(dispatch) {
        const bookmarkedArray = (await AsyncStorage.getItem("bookmarked")) || [];

        if (bookmarkedArray === undefined || bookmarkedArray.length == 0) {
            bookmarkedArray.push(video);
            dispatch(bookmarkSuccess(bookmarkedArray));
        }
    }
}

answered Jun 07 '19 at 11:15

Ashish

1,111
8
18

What is undefined? `bookmarkedArray`? It cannot be undefined, as you are putting empty array to it. – Ashish Jun 07 '19 at 13:21
Sorry I noticed that, however, `video` param is not defined `export function bookmarkVideo(video)` any ideas? – Bomber Jun 07 '19 at 13:39

Actions must be plain objects, use custom middleware for async actions

2 Answers2