Как сделать маршрут на основе некоторых данных - PullRequest
0 голосов
/ 22 января 2019

Я новичок в react-redux. Теперь вот что я делаю,

В этом, при нажатии на логин и в случае успеха,

history.push('/');

Я перенаправляю пользователя на эту страницу.

Теперь

import React from 'react';
import { fetchUserJd } from '../action/index';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import JobList from '../../JobList/container/JobList';

class LandingPage extends React.Component {

  componentDidMount() {
    this.props.fetchJobDescription();
  }

  render() {
    if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchJobDescription: () => dispatch(fetchUserJd())
  }
}

const mapStateToProps = (state) => {
  return {
    jobs: state.UserJobs.response
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LandingPage);

Вот моя целевая страница.

Теперь, вот что я делаю, я вызываю API в componentDidMount и получаю некоторые данные. Если данные доступны, я перенаправляю пользователя на другую страницу или другой маршрут.

const initialState = {
    response: [],
    error: false
}

    case FETCHING_JOBDESCRIPTION_SUCCESS:
                return {
                    ...state,
                    response: action.data,
                    error: false,
                }

Это мой редуктор, в котором я использовал начальное состояние в качестве пустого массива.

Теперь вот, что происходит, он напрямую переходит в другое условие к create-job, но данные доступны, поэтому он должен был отобразить этот компонент. Но, так или иначе, этого не происходит.

Ответ похож на =>

{
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null,
        "jdName": "Senior/ Lead UI Developer",
        "jobDescription": null,
        }]


   }

render() {
    if (this.props.isFetching) {
        return null;
    }
    else if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

Решение, которое я использовал, выглядит следующим образом:

export function fetchUserJd() {
  return (dispatch) => {
    let url = FETCH_JD_ROOT_URL + page + "&" + size;
    dispatch({
      type: REQUEST_INITIATED
    })
    return get(url)
      .then((response) => {
        if (response.status === 200) {
          dispatch(
            {
              type: FETCHING_JOBDESCRIPTION_SUCCESS,
              data: response.payload
            }
          )
          dispatch({
            type: REQUEST_SUCCESSED
          })
        } else {
          dispatch({
            type: REQUEST_SUCCESSED
          })
        }
      })
  }
  return Promise.resolve();
};

Итак, здесь я использовал Promise.resolve Теперь, в компоненте DidMount,

в конструкции,

 constructor(props) {
    super(props);
    this.state = {
      isloading: true
    }
  }

componentDidMount() {
    this.props.fetchJobDescription().then(() => {
      this.setState({
        isloading: false
      })
    });
  }

ТАК, кто-нибудь может помочь мне с этой проблемой?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...