получить конкретную информацию о работе на основе jobId в redux и маршрутизаторе

Question

У меня есть список вакансий для другого идентификатора работы.Я должен получить конкретную информацию о работе на основе идентификатора работы.Для этого я создал действие и функцию редуктора.Но я новичок в Redux, не в состоянии понять, как связать это с компонентом и отобразить результат.

Я вызываю API по Axios, чтобы получить сведения о задании по конкретному идентификатору.Я не знаю, как сделать вызов в компонент.Теперь я получаю неопределенный jobId.

action.js

export const retrieveLocations = (jobId) => (dispatch) => {
  axios.get(retrieveUrl+'/jobs/'+jobId).then(res => {
      dispatch({
          type: RETRIEVE_LOCATION,
          payload: res.data.jobs.basicDetails
      });
  });
};

код редуктора:

case 'RETRIEVE_LOCATION':
            return{
                ...state,
                conLocations:action.payload
            }

код компонента:

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom';
import store from '../../stores/store';
import {removeLocation,retrieveLocations} from '../../actions/locationActions';
import {removeAllLocation} from '../../actions/locationActions'

let _labels;

class ConfiguredLocation extends React.Component{
    constructor(props){
        super(props);

        this.handleRemove = this.handleRemove.bind(this);
        this.clearall = this.clearall.bind(this);
    }


    handleRemove(mruCode){
       this.props.removeLocation(mruCode)
    }

    clearall (){
      this.props.removeAllLocation()
    }
    componentDidUpdate(prevProps){
        let currJobId = this.props.match.params.jobId;
        let prevJobId = prevProps.match.params.jobId;
        if(currJobId!==prevJobId){
            this.props.retrieveLocations(jobId);
        }
    }
    componentDidMount(){
        let {jobId} = this.props.match.params;
        this.props.retrieveLocations(jobId);
        console.log(this.props);
    }

    render(){
        const _labels = store.getLabels();
        const {conLocations} = this.props;
        return(
            <div className="col-padding">
              <div className="pos-div"><h3>Configured Location</h3><button className="allLargeBtn" onClick={()=>{this.clearall()}}>Remove all location</button></div><hr/>
               <table className="table">
                    <tbody>
                        {conLocations.map((loct,index)=><tr key={index}>
                           <td><h5>{loct.mruCode} - {_labels[loct.division]} - {loct.country}</h5></td>
                           <td className="text-right"><img alt="DeleteIcon" onClick={()=>this.handleRemove(loct.mruCode)}className="deleteIconStyle" src="img/delete_large_active.png" /></td>
                        </tr>
                        )}
                    </tbody>
               </table>
            </div>
        );
    }

}

const mapStateToProps = state =>{
    return {
        conLocations: state.locationRed.conLocations
    };
  };

  const mapDispatchToProps = (dispatch) =>{
      return{
          removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
          removeAllLocation: () =>{dispatch(removeAllLocation())},
          retrieveLocations:(jobId) =>{dispatch(retrieveLocations(jobId))}
      };
  };


export default connect(mapStateToProps,mapDispatchToProps)(withRouter(ConfiguredLocation));

Код маршрута:

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
import { Security, ImplicitCallback, SecureRoute } from 'something...';
import history from '../history';
import store from '../stores/store';
import ConfiguredLocation from '../components/location/ConfiguredLocation';

/*Custom components imported */
import AppFrame from './views/AppFrame';

import {something...} from '../env-to-local';

class AppNavigator extends React.Component {

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

    componentDidMount() {
        var self = this;
        setTimeout(() => {
            self.setState({ loading: false });
        }, 1000);
    }

    render() {
        if (this.state.loading) {
            return (
                <div className="fix"><i className="fa fa-2x fa-circle fa-spin"></i>
                    <div>Loading</div>
                </div>
            )
        } else {
            return (                    
                <Router history={history}>
                   <div>
                    <Security issuer={soething...}
                        client_id={something...}
                        redirect_uri={window.location.origin + '/app/callback'}
                        scope={['profile', 'openid']}>
                        <Route path='/callback' component={ImplicitCallback} />
                        <AppFrame />
                    </Security>
                    <Route exact path="/app/jobs/:jobId" component={ConfiguredLocation}/>
                    </div>
                </Router>
            );
        }
    }
};

module.exports = AppNavigator;

код магазина:

<Provider store={createStoreWithMiddleware(reducers)}>
            <AppNavigator />
        </Provider>

При проверке в консоли я получаю этот пустой массив и этот.

Пожалуйста, предложите мне это.как отображать задания из API на основе идентификатора

Answer 1

Если вы хотите использовать асинхронную функцию, такую ​​как Axios Call, с использованием Redux, вы должны использовать промежуточное программное обеспечение, например redux-saga или redux-thunk и т. Д.

Я приведу пример использования redux-thunk

сделать магазин

import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from <your rootReducer path>

const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

action.js

export const retrieveLocations = (jobId) => (dispatch) => {
  axios.get(urlLoc+'/jobs/'+jobId).then(res => {
      dispatch({
          type: RETRIEVE_LOCATION,
          payload: res.data.job.locations
      });
  });
};