Как передать избыточное хранилище из одного компонента в другой?

Question

Я пытаюсь передать информацию из хранилища Redux в несколько компонентов таблицы, например, так:

<Table timelogData={store.getState()} />

Когда я пытаюсь console.log эти данные непосредственно внутри компонента таблицы, компонент будет отображаться иconsole.log будет работать

console.log(this.props.timelogData.)

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

console.log(this.props.timelogData.userProfile)

, я получу сообщение "TypeError: Невозможно прочитать свойство 'userProfile' из неопределенного"Даже если я получаю TypeError, console.log завершится успешно странным образом.Он может получить к нему доступ через консоль, но React это не нравится.

Как правильно передать хранилище Redux в другой компонент с возможностью доступа к данным дальше по дереву?

Answer 1

Вам необходимо использовать mapStateToProps в своих компонентах, а не пытаться передать магазин.

function mapStateToProps(state){
    return {
        nameAsProps: state.username,
    }
}

См .: https://medium.com/ovrsea/mapstatetoprops-and-why-you-may-not-need-mapdispatchtoprops-as-a-beginner-dd012a3da5e6

Answer 2

Это console.log(this.props.timelogData.userProfile) не работает, потому что вы, вероятно, не добавили свойство из mapStateToProps.Чтобы ответить на ваш вопрос о том, как передать хранилище различным компонентам, при условии, что вы использовали поставщика (обычно в файле index.js)

render(
   <Provider store={store}>
       <App/>
   </Provider>,
  document.getElementById('root')
)

, тогда любой компонент «подключается» к состоянию вашего хранилища, пока выconnect соответствующий компонент.

const mapStateToProps = state => ({someRandomProp: state.someValue})
export default connect(mapStateToProps)(ComponentThatNeedsYourStore) 

Но я бы предложил вернуться и прочитать официальную документацию.

Answer 3

Вы не передаете свой магазин своим компонентам.Вы должны использовать response-redux, который предоставляет привязки реагирования, чтобы подключить ваши компоненты к вашему магазину Redux.Ознакомьтесь с понятиями в их документации .

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