Redux-Thunk getStore() doesn't retain state. Returning 'undefined'

1
votes

This might be a question of best practices but I'd appreciate an explanation on why this doesn't work. I'm using Typescript + Redux + Thunk and trying to call actions like this:

export const requestUserDashboards  = createAction<DashboardModel>(Type.REQUEST_USER_DASHBOARDS);

Dispatch in the fetch: 

export const fetchDashboards = () => {
        return async (dispatch: Dispatch, getState: any) => {
            try {
                dispatch(requestUserDashboards({ 
                    currentDashboard: getState.currentDashboard,
                    dashboards: getState.dashboards,
                    hasDashboards: false,
                    error: getState.error
                }))

             ...
             }
         })
}

Here's the corresponding reducer: 

export const dashboardReducer = handleActions<RootState.DashboardState, DashboardModel>(
  {
    [DashboardActions.Type.REQUEST_USER_DASHBOARDS]: (state = initialState, action): RootState.DashboardState => ({
      currentDashboard: action.payload!.currentDashboard,
      dashboards: action.payload!.dashboards,
      hasDashboards: action.payload!.hasDashboards,
      error: action.payload!.error
    })
  },
  initialState
);

dispatch is working, however, getState doesn't correctly collect the current store state. I'm testing this by doing the following in the component receiving the updated store: 

componentWillReceiveProps(nextProps: Login.Props) {
    console.log(nextProps.defaultAccounts.defaultAccount);
}

Calling this in the component using:

this.props.defaultAccountActions.fetchUserDefaultAccount();

The action is working as the values from the fetch are being captured.

However, where I am using the getState.xxxx, these values are returning as undefined:

index.tsx:84 Uncaught TypeError: Cannot read property 'defaultAccount' of undefined

The initialState from my reducer is working. I can see this from doing the console.log(this.props.defaultAccounts.defaultAccount) from the componentWillMount() function.

I'm not sure what else I can provide. I think I'm actually just fundamentally misunderstanding how actions/reducers manage the store.

Questions

I am trying to get the current store values by using the getState.xxxx in the dispatch. Is this the correct way to do this?

2
javascriptreactjsreduxredux-thunk
can you post an example of how you are calling fetchDashboards ? - Sujit.Warrier

2 Answers

3
votes

isn't getState a function in that place? So you would need to do something

 const state = getState();

and then use state inside dispatch

found in documentation, yeah it is a function at that place so you should firstly invoke a function to get state and then use it (e.g. from documentation below)

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}
1
votes

If you are using mapstatetoprops in your component you can use that to get the values from store. mapStateToProps first argument is actually the Redux state. It is practically an abstracted getState().

const mapStateToProps = function(state, ownProps) {
   // state is equivalent to store.getState()
   // you then get the slice of data you need from the redux store
   // and pass it as props to your component

   return {
     someData: state.someData
   }
}