Using useMappedState from Redux React Hooks, component not re-rendered after API response

Question

useMappedState doesn't re-renders the component on receiving update from Ajax response Below is my component in action. I have logged entries at various stages and attached the screenshot of a fresh single render

You can safely assume that redux part is working fine for reducers and actions as visible from console entries of salesPerfData inside mapState before and after response in expanded from

import React, { useCallback, useState, useEffect, memo } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import StackedChart from '../../../components/StackedChart/index';
import { useDispatch, useMappedState } from 'redux-react-hook';
import { Creators } from './actions';

const SalesPerformance = ( ) => {
    const mapState = useCallback(
        (state) => { 
            console.log('inside mapSate', state);
            return { salesPerfData: state.salesPerfReducer.salesPerf } 
        },
        []
    );
    const { salesPerfData } = useMappedState(mapState);
    console.log('after useMappedState', salesPerfData);
    const dispatch = useDispatch();

    useEffect(
        () => {
            dispatch(Creators.fetchSalesPerf({ filter: 'monthly', duration: 'last3' }))
        },
        []
    );

    return (
        <section>
            <Paper className='mTB30'>
                <Grid container>
                    <Grid item sm={12}>
                        <StackedChart config={salesPerfData}  />
                    </Grid>
                </Grid>
            </Paper>
        </section>
    );
};
export default SalesPerformance;

Sandbox link here - https://codesandbox.io/s/o490z3wwny

Answer 1

In your mapState function you have:

return { salesPerfData: state.salesPerfReducer.salesPerf } 

but it should be:

return { salesPerfData: state.salesPerfReducer.salesPerfData }

salesPerfData instead of salesPerf. Since salesPerf is not defined within salesPerfReducer, your salesPerfData variable remains undefined.

Fixing this results in some other errors that I assume are just due to the downstream code not yet being tested.