Redux-Thunk 无法在组件中获取道具

Question

我有一个连接了 firebase 的应用程序。我能够在每一步控制台日志中查看传递的来自 firebase 的数据，但是当我处于组件级别时，它总是返回空。

import * as firebase from "firebase";
import { GET_LIST } from './types';



export const getListThunk = () => {
    return (dispatch) => {
        const teams = [];
        const teamsObj = {};
        var that = this;
        var ref = firebase.database().ref('SignUp/' + "577545cf-c266-4b2e-9a7d-d24e7f8e23a5");
        //var query = ref.orderByChild("uuid");
        console.log("uuid thunk ");

        ref.on('value', function (snapshot) {
            console.log("snap ", snapshot.val())
            snapshot.forEach(function (child) {

                let currentlike = child.val()
                    console.log("schedas ", currentlike)
                    teams.push(currentlike);

                    console.log("teams ",teams);



            });
            dispatch({ type: GET_LIST, payload: teams})
        })


    }

}

在此处的所有控制台日志中，我都能够从 firebase 接收信息。控制台显示：

现在我检查了我的减速器，看看我是否可以在那里看到我的信息。

import { GET_LIST } from '../actions/types';
const INITIAL_STATE = {
    jello: 'hello'
};

const listReducer = (state = INITIAL_STATE, action) => {


    switch (action.type){
        case GET_LIST:
            console.log("action ", action.payload);
            return action.payload;
        default:
        console.log("default ");
            return state;
    }

};

export default listReducer;

这个标记为操作的控制台日志也显示了有效负载

所以我再次能够看到 reducer 有效负载中的数据。

现在检查我的组件，我假设调用 this.props 会再次显示数据，但它显示为空。

组件：

mport React, { Component } from "react";
import {
    View,
    StyleSheet,
    Button,
    SafeAreaView,
    ScrollView,
    Image,
    TouchableOpacity,
    Alert,
    Animated,
    FlatList
} from "react-native";
import {connect} from 'react-redux';
import { getListThunk } from '../actions';
import Form from '../components/Form';
import firebase from "firebase";
import * as theme from '../theme';
import Block from '../components/Block';
import Text from '../components/Text';
import App from "../../App";



class RenderRequests extends Component {
    constructor(props) {
        super(props);
        this.params = this.props;
        uuid2 = this.props.uuid;
    }
    componentWillMount(){
        this.props.getListThunk();

    }
    componentDidMount(){
        console.log("did mount " , this.params.uuid)
        var uuid = this.params.uuid;

        //this.props.getListThunk({uuid});

    }


    render() {
        console.log("Component level array " ,this.props)
        return (
            <View>
            <Text> {this.params.uuid} </Text>

            </View>

        );
    }
}

export default connect(null, { getListThunk })(RenderRequests);

现在控制台登录显示一个空数组：

请注意，该日志文件中的 UUID 是我从上一个屏幕作为道具传递的 UUID。如您所见，“getListThunk”为空。

--------EDIT------------我添加了基于什么的代码维尼修斯·克利夫斯说过。但是我必须让它 {list: state} 而不是 {list: state.listReducer}

我现在在控制台中看到了它。但是，它似乎出现然后运行默认操作并且我的状态被重置为空。下面是我的控制台截图：

如果您在调用默认操作时看到我的减速器代码，我正在记录。为什么在调用初始 'GET_LIST' 操作后它被调用了这么多次。这会不断用默认状态替换我的状态。

Answer 1

getListThunk 是一个函数，正如预期的那样。要访问this.props 中所需的信息，您应该提供一个 mapStateToProps 函数进行连接。

export default connect(
  state=>({someVariableName: state.listReducer}), 
  { getListThunk }
)(RenderRequests);

现在，您在this.props 上丢失的信息将显示在this.props.someVariableName 下