操作必须是普通对象，使用自定义中间件进行异步操作

Question

当我尝试使用async 操作时出现此错误，如何在我的操作中使用async？：

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));
        };
    }
}

容器：

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);

组件：

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>
        );
    }
}

商店：

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;

更新：

我在我的操作中得到video undefined：

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));
        }
    }
}

Answer 1

替换您的操作方法。 使用以下语法来创建 redux 操作。

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));
        };
    }
}

参考this 发布它会了解它是如何工作的。

Answer 2

当您使用 thunk（或任何中间件）和异步操作时，您应该像这样从您的操作中返回函数 -

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));
        }
    }
}