Я новичок в 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
})
});
}
ТАК, кто-нибудь может помочь мне с этой проблемой?