【问题标题】:React-Redux-Thunk: actions does not return dispatchReact-Redux-Thunk:动作不返回调度
【发布时间】:2018-05-21 18:27:22
【问题描述】:

我正在使用带有 Redux-thunk 中间件的 React Native。 我的问题是调度函数不返回对象,甚至不控制台。

这是我的动作文件:

function movieSelc(movie) {
    return {
            type: types.MOVIE_SELECT,
            selectedMovie: movie
        };
}

export function selectMovie(m) {
    console.log("this console works!")
  return (dispatch) => {
    console.log("this console never works")
    dispatch(movieSelc(m));
  };
}

这是组件(我在这里不包括 const 样式以使其更短):

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Image, } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import * as actions from './../actions';

class ListItem extends Component {
    render() {
        const { movie } = this.props;
        return (

            <View>
                    {
                      movie && movie.map((item, index) =>
                        <View key={index} style={styles.containerStyle}>
                             <Image
                                 source={{ uri: `https://image.tmdb.org/t/p/w342${item.backdrop_path}` }}
                                 style={styles.imgStyle}
                             />

                            <TouchableOpacity
                                 style={{ backgroundColor: 'gray' }}
                                 onPress={() => { actions.selectMovie(item); }}
                            >
                                  <Text style={styles.headStyle}>{item.title}</Text>
                                  <Text>{item.overview}</Text>
                                  <Text style={styles.rateStyle}>
                                    Release Day:{item.release_date}
                                  </Text>
                                  <Text style={styles.rateStyle}>Rating: {item.vote_average}</Text>
                            </TouchableOpacity>
                        </View>)
                    }
            </View>

        );
    }
}
ListItem.propTypes = {
    actions: PropTypes.object.isRequired,
    movies: PropTypes.object.isRequired,
};


function mapStateToProps(state) {
    const { movies } = state;
    return {
        movies,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    };
}

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

如果我需要提供更多信息,请告诉我。谢谢!

【问题讨论】:

    标签: react-native react-redux redux-thunk dispatch


    【解决方案1】:

    您正在调用 selectMovie 操作而不是调度它。使用 bindActionToProps 方法,react-redux 为您提供了一种通过 props 调度操作的方法,因此正确的代码应该是:

    <TouchableOpacity 
    style={{ backgroundColor: 'gray' }}
    onPress={() => { this.props.actions.selectMovie(item)); }}>
    

    【讨论】:

      猜你喜欢
      • 2018-05-30
      • 2019-11-12
      • 2019-04-06
      • 1970-01-01
      • 2017-05-25
      • 2018-12-28
      • 1970-01-01
      • 2017-09-16
      • 2017-08-28
      相关资源
      最近更新 更多