React-Redux-Thunk:动作不返回调度

Posted

技术标签:

【中文标题】React-Redux-Thunk:动作不返回调度【英文标题】:React-Redux-Thunk: actions does not return dispatch 【发布时间】: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);

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于React-Redux-Thunk:动作不返回调度的主要内容,如果未能解决你的问题,请参考以下文章

RPC 调用不起作用。指导 + 调度

调度动作以响应另一个动作

ngrx 8影响其他类型的调度动作

如何从 getInitialProps 内部调度一个动作?

javascript react-redux-thunk index允许使用redux dev工具

React 上下文 API 和/或 React-Redux-Thunk