Как перейти на новую страницу после отправки звонка

Question

У меня проблемы с настройкой навигации по страницам с использованием реакции и редукции. У меня есть компонент, который имеет кнопку ссылки. Когда кнопка нажата, мне нужно вызвать диспетчер, чтобы обновить свое состояние, а затем перенаправить на другую страницу. Однако перенаправление не происходит, вероятно, из-за неправильного синтаксиса в моем создателе действий.

Как показано ниже в компоненте AI, я пытался выполнить навигацию к следующей странице, используя history.push в Компоненте А. Это сработало, но, похоже, загрузка страницы панели мониторинга дважды и более проблематичная, когда я вернулся к Компоненту А он не переплетал, так что, похоже, он не обновлялся до новейшего состояния. Чтобы вернуться назад, нужно было нажать ссылку на панели навигации на странице, содержащей компоненты.

Я пытался использовать ComponentWillMount и ComponentWillReceiveNextProps в Компоненте A, но это вызывало бесконечный цикл.

История Помощник

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

Компонент А:

import { dataActions } from '../../_actions';

componentDidMount() {
    this.fetchData();
}

handleLoadData(dataId) {
        this.props.dispatch(dataActions.loadData(dataID));
        //history.push('/dashboard')
    }

fetchData() {
    this.props.dispatch(dataActions.getAll());
}

render() {
    console.log("the value of props in render", this.props)
    const { dataList } = this.props; 

    return (
        <div>
            <h1>Data List</h1>
            {(dataList.items) ? renderdataListTable(dataList.items, this): null}
        </div>
    );
}

renderdataListTable выше просто возвращает простую таблицу со ссылками на кнопки:

<td><button type="button" class="btn btn-link" onClick={(e) => self.handleLoadData(data.dataId)}>{data.dataName}</button></td>

Создатель действия:

import { history } from '../_helpers';

    function loadData(dataId) {
        return dispatch => {
            dispatch(request(dataId));

                dataService.loadById(dataId)


                .then(
                    dataItems=> {
                        dispatch(success(dataId));
                        history.push('/dashboard');
                    },
                    error => {
                        dispatch(failure(error));
                        dispatch(alertActions.error(error));
                    }
                );
        };

        function request() { return { type: dataConstants.LOADBYID_REQUEST } }
        function success(dataItems, dataId) {
            return { type: dataConstants.LOADBYID_SUCCESS, payload: { dataItems, dataId} }}
        function failure(error) { return { type: dataConstants.LOADBYID_FAILURE, error}}
}

Вот мой компонент приложения с настройкой маршрутизатора:

import { history } from './_helpers';
import { alertActions } from './_actions';
import { PrivateRoute } from './_components';

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

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }


 render() {
        const { alert } = this.props;
        return (
                <Router history={history}>
                <Layout>
                    <MuiThemeProvider>
                        {alert.message &&
                            <div className={`alert ${alert.type}`}>{alert.message}</div>
                        }
                        <PrivateRoute exact path="/" component={HomePage} />
                        <PrivateRoute exact path="/showdata" component={ShowDataList} />

                        <Route path="/home" component={Home} />
                        <Route path="/login" component={LoginPage} />
                        <Route path="/register" component={RegisterPage} />
                    </MuiThemeProvider>
                </Layout>
            </Router>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

Answer 1

Вы можете передать функцию обратного вызова в качестве параметра вашему действию:

В компоненте:

callToFunctionWithCallback(dataId) {
  this.props.loadData(dataId, () => {
    //... here you do your redirect stuff     
  })
}

В действии создатель:

export const loadData = (dataId, callbackFunction) => {
  // ... do your stuff here
    .then(
      dataItems=> {
         dispatch(success(dataId));
         callbackFunction()
         },
         error => {
           dispatch(failure(error));
           dispatch(alertActions.error(error));
        }
   );