Как получить данные с сервера с помощью Props от React Router & Redux - PullRequest
Новая
       75

Как получить данные с сервера с помощью Props от React Router & Redux

1 голос
/ 09 июля 2020

Я использую в своем проекте React Router, Redux, Redux Sagas, antd. Моя основная цель - щелкнуть ячейку из таблицы элементов, go, на следующую страницу, которая является страницей сведений для этого элемента, и получить сведения с сервера, используя идентификатор, который я передаю из ссылки. Сейчас это не работает. У меня есть компонент, компонент A, который имеет такой столбец: 

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    render: (id: number) => <Link to={{ pathname: `/pages/my-page/${id}`, state: {id}}}>{id}</Link>,
  },

Он переходит к следующему компоненту, компоненту B, с переданным идентификатором параметра. Теперь я хочу использовать этот идентификатор для выполнения дальнейшая выборка деталей для этого конкретного элемента с использованием саги о сокращении и сокращении и отображение ее на следующей странице, Компонент B, которую я делаю с помощью конструктора. Я также пробовал использовать приведенный ниже код в componentDidMount (), но это тоже не сработало. 

  constructor(props: any) {
    super(props);

    const {onDetailsSearch, state} = props;
    const {router} = state;
    const {location} = router;
    const {state: newState}: {state: any} = location;
    onDetailsSearch({id: (newState || {}).id});
  }

Это то, что находится в редукторе: 

import {DetailsState} from 'state/'
import actions, {DetailsAction} from './actions'

export interface DetailsState {
  loading: boolean
  id: number
  items: Details[]
}

const initialState: DetailsState = {
  loading: false,
  id: 0,
  items: [],
}

export default function DetailsReducer(state: DetailsState = initialState, action: DetailsAction): DetailsState {
  switch (action.type) {
    case actions.SET_STATE:
      return { ...state, ...action.payload }
    default:
      return state
  }
}

Это Код саги Redux: 

import {all, call, put, takeEvery} from 'redux-saga/effects'
import getDetails from "services/getDetails";
import actions from './actions'

type Params = {
  type: typeof actions.LOAD_DETAILS
  payload: object
}

export function* LOAD_DETAILS({ payload }: Params) {
  yield put({
    type: 'details/SET_STATE',
    payload: {
      loading: true,
    },
  })
  const { response, error } = yield call(getDetails, payload)
  console.log('response:', response);
  if (!error) {
    yield put({
      type: 'details/SET_STATE',
      payload: {
        details: response.data,
      },
    })
  }
  else {
    // TODO: handle error
  }
  yield put({
    type: 'details/SET_STATE',
    payload: {
      loading: false,
    },
  })
}

export default function* rootSaga() {
  yield all([
    takeEvery(actions.LOAD_DETAILS, LOAD_DETAILS),
  ])
}

Вот как я вызываю функцию отправки onDetailsSearch, которая, в свою очередь, должна вызывать сагу и устанавливать результаты в хранилище redux.

Но этого не происходит. . Что здесь не так?

1 Ответ

0 голосов
/ 09 июля 2020

Я выяснил, в чем проблема. У меня есть действия, хранящиеся как константы в файле actionConstants.ts.

Константа действия для этого конкретного действия была 'details/LOAD_DETAILS', а строка действия в отправке, которую я использовал, была 'LOAD_DETAILS'

...