Question

我正在将React.js与Redux，React-Router和React-Router-Redux一起使用。

我想在商店达到特定状态时手动重新路由（或调用操作）。如果商店有特定的状态，我该如何收听？我在哪里重新路由或致电行动？

Answer 1

如果这些调用是异步的，那么使用异步操作创建器，并且promise会很好地处理这个。

// Action creator
function doTheStuff(someData, router) {
    return dispatch => {
        dispatch(somePendingAction());
        return myRequestLib.post('/the-endpoint/', someData)
            .then((response) => {
                if (response.isTransactionDone) {
                    dispatch(transactionDoneAction(response));
                    router.transitionTo('/theUrl');
                }
            });
    }
}

我不会把它放到商店里，因为我认为商店唯一的工作就是包含/处理数据。

Answer 2

要在完成一系列其他操作并将其持久保存到商店后启动页面更改，请调度以下redux-thunk。这里的关键是你有一系列的thunk返回promises，然后一旦完成，你可以用另一个动作更新路由器。

在一个组件中：

import React from 'react';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import { doStuff, doMoreStuff } from './actions';

class SomeComponent extends React.Component {
  ...
  onClick = e => {
    const { doStuff, doMoreStuff, push } = this.props; // these are already wrapped by dispatch because we use connect
    ...
    doStuff()
      .then(r => doMoreStuff())
      .then(r => push('/newPath')) // if actions succeeded, change route
      .catch(e => console.warn('doStuff() or doMoreStuff failed'));
    ...
  }
  ...
}

export default connect(null, { doStuff, doMoreStuff, push })(SomeComponent);

./actions.js中的一些操作：

export function doStuff() {
  return (dispatch, getState) => {
    return API.getSomeInfo()
      .then(info => dispatch({ type: 'GET_SOME_INFO', payload: info }))
  }
}

export function doMoreStuff() {
  return (dispatch, getState) => {
    return API.getSomeMoreInfo()
      .then(info => dispatch({ type: 'GET_SOME_MORE_INFO', payload: info }));
  }
}

或者，您可以制作一个类似于此的重定向的承诺：

export function doAllStuff() {
  return dispatch => {
    return Promise.all(doStuff(), doAllStuff())
      .then(results => dispatch(push('/newPath')))
      .catch(e => console.warn('Not all actions were successful'))
  }
}

启动它的组件代码就是

onClick = e => {
  ...
  doAllStuff(); // Since we caught the promise in the thunk, this will always resolve
  ...
}

重新审视Redux商店的特定状态

2 个答案: