Redux-Thunk unable to get props in component

Question

I have an application with firebase connected. I am able to at each step console log and get see the data from firebase being passed around however when im in the component level it always returns empty.

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


    }

}

At all the console log here I am able to receive the information from firebase. The console displays:

Now I checked my reducer to see if I can see my information there.

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;

This console log labeled action shows the payload as well

So I am again able to see the data in the reducer payload.

Now checking my component I would assume calling this.props would show the data again however it shows up empty.

Component:

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

Now console login this shows an empty array:

NOTE the UUID in that log file is a UUID I passed as a prop from the previous screen. As you can see the "getListThunk" is empty.

--------EDIT------------------------ I have added code based on what Vinicius Cleves has said. However I had to make it {list: state} instead of {list: state.listReducer}

I now see it in my console. However, it seems like it shows up then runs the default action and my state gets reset to nothing. Below is a screenshot of my console:

If you see my reducer code I am logging when the default action is being called. Why is it being called so many times after the initial 'GET_LIST' action gets called. This keeps replacing my state with the default state.

Answer 1

getListThunk is a function, as expected. To access the information as you want in this.props, you should provide a mapStateToProps function to connect.

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

Now, the information you were missing on this.props will show under this.props.someVariableName