Redux-Thunk unable to get props in component - react-native

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