Saya baru saja masuk ke reaksi/redux dan saya berhasil memanggil api masuk dan api lain untuk mengambil daftar paket perangkat lunak. Api untuk mengambil daftar paket perangkat lunak harus dipanggil setelah login berhasil yaitu, mengarahkan ulang ke rute /paket dan memanggil api dari componentDidMount(). Pengalihan berfungsi tetapi componentDidMount() hanya diaktifkan jika saya memuat ulang halaman. Apa cara yang benar untuk mengarahkan dan memanggil api untuk mendapatkan paket perangkat lunak menggunakan react-router?

loginReducer.js

import {Map,fromJS,List} from 'immutable';
import * as types from '../actions/actionTypes';
import initialState from './initialState';
import {browserHistory} from 'react-router';

const creds = Map({
  credentials: Map({
    authToken: null,
    details: Map({
      uuid: null,
      emailAddress: null,
      permissions: List(),
      roles: List(),
      firstName: null,
      lastName: null,
      status: null
    }),
    refreshToken: null
  })
});

export default function loginReducer(state = creds.get('credentials'), action) {
  switch (action.type) {
    case types.LOGIN_USER_SUCCESS:
      hashHistory.push('/packages')
      return state;
    default:
      return state;
  }
}

Packages.jsx

import React, {PropTypes} from 'react';
import pureRender from 'pure-render-decorator';
import {connect} from 'react-redux';
import {loadPackages} from '../../actions/packageActions';
import reducer from '../../reducers/rootReducer';
import PackageList from './PackageList';

export class Packages extends React.Component {
  componentDidMount() {
    console.log('loading packages'); // EDIT
    this.props.dispatch(loadPackages());
  }
  render() {
    return (
      <div className="col-lg-12">
        {this.props.results ?
        <PackageList results={this.props.results} /> :
        <h3>No Packages Available</h3>}
      </div>
    );
  }
};

const mapStateToProps = (state, ownProps) => {
  return {
    packages: state.packages.get('packages'),
    results: state.packages.getIn(['packages','results'])
  };
}

export const PackagesContainer = connect(mapStateToProps)(Packages);

index.jsx

const routes = <Route component={App}>
  <Route path="/packages" component={PackagesContainer} />
  <Route path="/login" component={LoginContainer} />
</Route>;

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{routes}</Router>
  </Provider>,
  document.getElementById('app')
);
0
neridaj 9 Januari 2018, 23:42

1 menjawab

Jawaban Terbaik

Saya menggunakan browserHistory.push() untuk pengalihan ketika saya menggunakan hashHistory dalam definisi router saya.

0
neridaj 9 Januari 2018, 21:57