Redux продолжает рендеринг, когда состояние не меняется - PullRequest
Новая
       69

Redux продолжает рендеринг, когда состояние не меняется

1 голос
/ 18 июня 2020

Я делаю свой первый проект React-Redux.

Я научился повторному рендерингу React, когда он запускается только в том случае, если состояние компонента изменилось. .

Потому что состояния не меняются, но компонент повторно визуализируется каждые 1-3 секунды. Fully matched data

Я пробовал shallowEqual, но ничего не вышло.

Почему это происходит? 

// container
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

import Home from 'presentations/Home';
import * as homeActions from 'modules/home';

const HomeContainer = () => {
    const dispatch = useDispatch();
    const list = useSelector(state => state.home.list);

    dispatch(homeActions.getList());

    console.log(list);

    return (
        <Home
        />
    );
}

export default HomeContainer;

// Redux module
import axios from 'axios';
import { call, put, takeEvery } from 'redux-saga/effects';
import { createAction, handleActions } from 'redux-actions';

function getListAPI() {
    return axios.get('http://localhost:8000/');
}

const GET_LIST         = 'home/GET_LIST';
const GET_LIST_SUCCESS = 'home/GET_LIST_SUCCESS';
const GET_LIST_FAILURE = 'home/GET_LIST_FAILURE';

export const getList = createAction(GET_LIST);

function* getListSaga() {
    try {
        const response = yield call(getListAPI);
        yield put({ type: GET_LIST_SUCCESS, payload: response });
    } catch (e) {
        yield put({ type: GET_LIST_FAILURE, payload: e });
    }
}

const initialState = {
    list: []
};

export function* homeSaga() {
    yield takeEvery('home/GET_LIST', getListSaga);
}

export default handleActions(
    {
        [GET_LIST_SUCCESS]: (state, action) => {
            const temp = action.payload.data;
            return {
                list: temp
            };
        }
    }, initialState
);

1 Ответ

2 голосов
/ 18 июня 2020

Вы вызываете dispatch = useDispatch(); внутри тела функционального компонента, который обновляет состояние list, что вызывает повторную визуализацию, а затем выполняется ваш dispatch = useDispatch(); и т. Д.

Отправка вашего действия в использовании Эффект для решения проблемы 

const HomeContainer = () => {
  const dispatch = useDispatch();
  const list = useSelector((state) => state.home.list);
  useEffect(() => { //<---like this
    dispatch(homeActions.getList());
  }, []);

  console.log(list);

  return <Home />;
};
...