Действия должны быть простыми объектами, используйте пользовательское промежуточное ПО для асинхронных действий - PullRequest
Новая
       13

Действия должны быть простыми объектами, используйте пользовательское промежуточное ПО для асинхронных действий

2 голосов
/ 07 июня 2019

Я получаю эту ошибку, когда пытаюсь использовать свое действие 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;

UPDATE:

Я получаю 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));
        }
    }
}

Ответы [ 2 ]

2 голосов
/ 07 июня 2019

Замените свой метод действия. используйте приведенный ниже синтаксис для создания избыточных действий. 

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

см. в этом сообщении, он поймет, как это работает.

1 голос
/ 07 июня 2019

Когда вы используете 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));
        }
    }
}
...