Реакт + Редукс | Опора возвращает неопределенное здесь - почему?

Question

Я недавно изучил некоторые базовые Redux и просмотрел учебник по их документам.

У меня есть компонент класса представления React, который я хочу, чтобы он также был его собственным контейнерным компонентом с именем Word.

Я хочу, чтобы значения его реквизита поступали из магазина Redux. Мне удалось успешно получить начальные значения для его реквизита из начального состояния магазина, но когда я пытаюсь отправить действие, его свойство wordParts возвращает undefined.

Это структура Word:

Word : {
  wordParts : <array>
  stem : <object> //I'm using a string for now for testing
}

Это структура магазина:

store : {
  word : {
    wordParts : <array>
    stem : <object> //I'm using a string for now for testing
  }
}

Это то, что я хочу, чтобы действия выполнялись при отправке:

//is used to update Word.stem
replaceStem(stem) = currentStem => newStem 

//is used to add a some `suffix` variable as the last element of the current Word.wordParts
addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix] 

Это мой код - у меня есть какой-то другой не относящийся к делу код, я немного его изменил, чтобы удалить неактуальный код (например, стили), но он должен вести себя так же, как мой локальный код.

https://codesandbox.io/s/rj2xlryx8m

Answer 1

У вас очень странная структура и разметка как для React, так и для Redux, и я не могу дать вам правильный синтаксис, но в контейнере Word в этом mapStateToProps вам нужно вернуть эти реквизиты, которые приходят из хранилища Redux:

return {
 whateverProps: state.whateverProps
}

, а затем, когда вы захотите передать эти реквизиты в свой компонент, вы можете получить доступ и передать их с помощью:

this.props.whateverProps

Answer 2

Небольшая путаница с частью уничтожения объекта

addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix] 

, поскольку в исходном объекте нет ключа «суффикса» для замены.

Answer 3

Решение найдено + объяснение:

Пояснение: Компонент получил свои реквизиты из класса, поэтому он правильно инициализировался, как, когда экземпляр этого класса вызывал в своем конструкторе реквизиты, взятые из хранилища. Эти начальные состояния сохранялись как свойства класса, а при обращении к ним как к свойствам объекта возвращаемые значения были теми же, что были сохранены в классе.

Решение: Удалите / не используйте эти реквизиты в качестве свойств класса, и вместо этого вызовите их из функции render(), которая получает , вызванную при изменениях компонента (в этом случае, изменение в его реквизитах, выполняемое mapStateToProps, который вызывается изменением в магазине Redux).

Answer 4

Вам нужно добавить оператор connet (из библиотеки react-redux). Это экспортирует функцию с именем mapStateToProps. Это HOC, который берет части хранилища избыточности и передает их в реквизиты вашего компонента.