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：

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

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

2 个答案: