Как получить доступ к redux-store из response componentDIdMount ()
В следующем коде я пытаюсь передать state.userData.userDetails с redux-store на getleftpaneProductCatalogue(), но state.userData.userDetails недоступен для componentDidMount(). Я попытался назначить state.userData.userDetails на this.prop.userProfile, но все равно this.prop.userProfile - пустое значение. Как получить доступ к prop в componentDidMount?
import React,{Component} from 'react';
import { connect } from 'react-redux';
import {Row, Col } from 'react-materialize';
import {getleftpaneProductCatalogue} from '../actions/leftpane-actions';
import ProductCatalogueLeftPaneComp from '../components/pages/product-catalogue-leftpane';
class ProductCatalogueLeftPane extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
console.info('this.props^', JSON.stringify(this.props));
this.props.getleftpaneProductCatalogue().then((data) => {
console.info('productdata', data);
})
}
render() {
return (
<div>
{JSON.stringify(this.props.userProfile)}
</div>
)
}
}
const mapStateToProps = (state) => {
console.info('state^', JSON.stringify(state));
return {leftpaneProductCatalogue: state.leftpaneProductCatalogue, userProfile: state.userData.userDetails};
};
const mapDispatchToProps = (dispatch) => {
return {
getleftpaneProductCatalogue: () => dispatch(getleftpaneProductCatalogue()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductCatalogueLeftPane);
Ответы 1
Вы можете получить доступ к состоянию непосредственно в mapDispatchToProps и передать его в getleftpaneProductCatalogue:
componentDidMount() {
const { dispatch, getleftpaneProductCatalogue }
dispatch(getleftpaneProductCatalogue())
}
const mapDispatchToProps = dispatch => {
return {
getleftpaneProductCatalogue: () => (dispatch, getState) => {
const state = getState()
const details = state.userData.userDetails
return dispatch(getleftpaneProductCatalogue(details))
},
dispatch
}
}
Тем не менее, как вы это делаете, передача состояния через mapStateToProps все еще действительна, но более подробна. Следовательно, проблема будет в другом месте.
Вот моя ставка. Я предполагаю, что вы получаете userData где-то в вашем коде с вызовом async API, и он еще не загружен. В этом случае вам следует сначала дождаться получения данных, а затем вы сможете получить к ним доступ в своем компоненте ProductCatalogueLeftPane.
Прохладный! Я рад узнать, что вы обнаружили ошибку и исправили ее.
Я делал именно то, о чем вы догадались! При входе в систему я добавляю данные аутентификации пользователя в хранилище redux, но это было асинхронно, поэтому при установке домашнего экрана хранилище еще не обновлялось.