Используя useMappedState из Redux React Hooks, компонент не перерисовывается после ответа API - PullRequest
0 голосов
/ 28 января 2019

enter image description here

useMappedState не выполняет повторную визуализацию компонента при получении обновления от ответа Ajax. Ниже приведен мой компонент в действии.Я регистрировал записи на разных этапах и прикреплял скриншот свежего одиночного рендера

. Вы можете смело предположить, что часть редуктора работает нормально для редукторов и действий, что видно из консольных записей salesPerfData внутри mapState до и после ответа врасширен от

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;

Ссылка песочницы здесь - https://codesandbox.io/s/o490z3wwny

1 Ответ

0 голосов
/ 28 января 2019

В вашей функции mapState есть:

return { salesPerfData: state.salesPerfReducer.salesPerf } 

, но должно быть:

return { salesPerfData: state.salesPerfReducer.salesPerfData }

salesPerf Данные вместо salesPerf.Поскольку salesPerf не определено в salesPerfReducer, ваша переменная salesPerfData остается неопределенной.

Исправление этой ошибки приводит к некоторым другим ошибкам, которые, как я полагаю, происходят из-за того, что нисходящий код еще не тестируется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...