React Redux Dispatch

What is the best way to call a dispatch to get initial data on a React component. My understanding is that ComponentWillMount is called before render. So in theory if I call dispatch on ComponentWillMount, by the time I hit render and then ComponentDidMount I should have my data in the component's props, right? I'm not seeing that.

I'm seeing that render gets called twice and that on the first go when the component is being initialized, I cannot access the data in props. It also seems like dispatch does not actually get called until the second render. I'm basically looking to have some light shed on the best way to call a dispatch when initially setting up a component. I'm essentially trying to do something like the following where I use a container component to get my data from dispatch and then pass it to a child component as props. But I also want to initialize some state variables in the ContainerComponent and then pass them to the ChildComponent as props. The thing is that the state variables I want to initialize depend on the data returned from dispatch and ideally I would do the initialization in ComponentWillMount or ComponentDidMount.

import React from 'react'; import axios from 'axios'; import { connect } from 'react-redux'; import ChildComponent from './ChildComponent.js'; import { getTransactionsAll } from '../actions/actions.js'; class ContainerComponent extends React.Component { constructor() { super(); this.state = { acctList:[], acctChecked:[], categoryList:[] } } componentWillMount() { console.log("componentWillMount entered"); this.props.get_data(); console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...?? } componentDidMount() { console.log("componentDidMount entered"); console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...?? } render() { console.log("TransactionManagerContainer render entered"); console.log(this.props.searchProps.transactions_all);//this is undefined the first time around meaning the dispatch has not assigned the data yet...??, but is defined on the second call to render after the dispatch has actually occurred... return <ChildComponent data={this.props.searchProps.data}/>; } const mapStateToProps = (state) => ({ searchProps: state.searchProps }); export default connect(mapStateToProps, {getTransactionsAll})(TransactionManagerContainer); 

Here is my reducer that assigns the state:

import { combineReducers } from 'redux' import {GET_TRANSACTIONS } from '../actions/actions.js' import {GET_TRANSACTIONS_ALL } from '../actions/actions.js' const INITIAL_STATE = { defaultYear: 2016, transactions: []}; function get_transactions(state = INITIAL_STATE, action) { // console.log("this is in the reducer: get_transactions"); // console.log(action); switch(action.type) { case GET_TRANSACTIONS: // return { ...state, transactions: action.payload }; return Object.assign({}, state, { transactions: action.payload, selectedYear: action.selectedYear }) default: return state; } } function get_transactions_all(state = INITIAL_STATE, action) { console.log("this is the value of action in the reducer: get_transactions_all"); console.log(action); switch(action.type) { case GET_TRANSACTIONS_ALL: // return { ...state, transactions: action.payload }; return Object.assign({}, state, { transactions_all: action.payload }) console.log("this is the value of state in the reducer after being set"); console.log(state); default: return state; } } const rootReducer = combineReducers({ //stateProps: get_transactions, searchProps: get_transactions_all }) export default rootReducer 

Here are my actions:

import axios from 'axios'; export const GET_TRANSACTIONS = 'GET_TRANSACTIONS'; export function getTransactions(year) { return function(dispatch) { axios.get(`http://localhost:3001/api/transfilter?year=${year}&grouping=2`) .then(response => { dispatch({ type: GET_TRANSACTIONS, payload: response.data, selectedYear: year }); }) .catch((error) => { console.log(error); }) } } export const GET_TRANSACTIONS_ALL = 'GET_TRANSACTIONS_ALL'; export function getTransactionsAll(year) { return function(dispatch) { axios.get(`http://localhost:3001/api/trans?limit=20`) .then(response => { dispatch({ type: GET_TRANSACTIONS_ALL, payload: response.data }); }) .catch((error) => { console.log(error); }) } }