Как получить значение в качестве реквизита в другом компоненте

Question

В моем приложении реакции у меня есть три параллельных компонента.В моем первом компоненте я выполняю вызов API и, основываясь на ответе, перенаправляю поток в проверенный или неподтвержденный компонент.

Когда пользователь направляется в проверенный компонент, при нажатии кнопкииз которых пользователь должен быть перенаправлен на другой компонент, который должен отображать данные в ответе API (первый компонент) в виде пары ключ-значение.Я использую Redux для управления состоянием.

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

action.js-

export const setPoiData = (poiData)  => dispatch => {
    console.log('inside actions');
    dispatch({
        type: SET_POI_DATA, 
        payload: poiData
    })
}

Reducer.js-

const initialState = {
    poiData: {},
}

const reducerFunc = (state = initialState, action)  => {
    switch (action.type) {
        case SET_POI_DATA:
        console.log('inside poi reducers');
            return {...state,poiData: action.payload}    
        default: return {...state}
    }
}

Component 1-

//API call

Подробный компонент-

Чтобы получить данные из хранилища, я делаю что-то вроде ниже-

componentDidMount() {
    console.log(this.props.poiData)
 }

function mapStateToProps(state) {
    return {
        poiData: state.poiData,
    }
}

const mapDispatchToProps = dispatch => ({
  setPoiData(data) {
    dispatch(setPoiData(data));
  }
})

Я не уверен, где я иду не так.Может кто-нибудь подсказать мне, как действовать дальше?

Answer 1

внутри componentDidMount () вы должны вызывать действие, подобное этому this.props.setPoiData(<your data here>);