Установка состояния Redux как состояния по умолчанию при использовании React Hooks - PullRequest
Новая
       26

Установка состояния Redux как состояния по умолчанию при использовании React Hooks

0 голосов
/ 30 октября 2019

У меня есть избыточное действие, которое выбирает все данные и сохраняет их в глобальном хранилище Redux.

Я хочу сохранить это состояние в локальном состоянии с помощью хуков, чтобы фактическое состояние не менялось при локальном его изменении.

То, что я сейчас делаю, это 

const [filteredTable, setFilteredTable] = useState([])

useEffect(() => {
    props.fetchDatabase();
    props.fetchOptions();
    setFilteredTable(props.filtered_table_data);
}, [])

В useEffect props.fetchDatabase() получает props.filtered_table_data, и я вижу это, когда я его получаю console.log.

Однако, когда я использую Hooks, чтобы сохранить его влокальное состояние и проверь, если оно там,

console.log(filteredTable, 'filteredTable')

просто выдаст мне [].

Что я делаю не так?

Ответы [ 3 ]

1 голос
/ 30 октября 2019

Я считаю, что вызов props.fetchDatabase() является асинхронным, поэтому к тому времени, когда вы пытаетесь setFilteredTable, props.filtered_table_data еще не обновился.

Вы можете попробовать что-то вроде этого: 

useEffect(() => {
    props.fetchDatabase();
    props.fetchOptions();
}, [])

useEffect(() => {
    setFilteredTable(props.filtered_table_data);
}, [props.filtered_table_data]);

Обратите внимание, что этот эффект будет запускаться каждый раз, когда изменяется filtered_table_data, поэтому вам может потребоваться обернуть код в обратном вызове какими-то условиями, если вы хотите ограничить установку локального состояния.

0 голосов
/ 30 октября 2019

Не уверен, что это ответит на ваш вопрос, но React-Redux предоставляет несколько хуков для доступа к хранилищу избыточности. То, что может вас заинтересовать, это useSelector() hook.

Вот пример использования: 

import { useSelector } from 'react-redux';

const App = () => {
  const tableData = useSelector(state => state.tableData);
  ...
}
0 голосов
/ 30 октября 2019
Обратный вызов

useEffect с [] в качестве второго аргумента хука вызывается только один раз, когда компонент только что смонтирован. Внутри fetchDatabase и fetchOptions вызываются обратные вызовы, и сразу после этого (когда данные еще не получены) вы вызываете setFilteredTable, поэтому в filteredTable появляется пустой массив.

...