在进行了特定的调度重定向后，从组件级别进行重定向

Question

我有一个相当简单的用例，但是很难找到合适的答案。我正在使用React,Redux,React Router &Redux中间件

让我们说，我有两个模块食品标签&食物。这些模块有单独的创建，列表，编辑页面/组件。在实际用例中，食品标签没有特殊的价值。每当创建一个food对象时，将在food对象的tags属性中插入分隔的标签。

一般用例是，在成功创建任何项后，react router将其重定向到列表页面。

每当我从食品标签模块调用createTag动作时，我可以用一种hack的方式来做。就像在成功分派之后一样，我可以调用

browserHistory.push('/dashboard/tags')

这导致了一个问题，我可以从food create组件创建内联food标签。代码如下

actions.js

export function createTag(tag) {
return function (dispatch) {
    axios.post(API_URL + 'api/tags', tag)
        .then((response) => { 
            // I CAN DO REDIRECT HERE,BUT THIS CAUSES THE PROBLEM
            dispatch({type: 'TAG_CREATE_RESOLVED', payload:response});
            toastr.success('Tag created Successfully.......!');
        })
        .catch((err) => {
            dispatch({type: 'TAG_CREATE_REJECTED', payload: err});
            toastr.warning(err.message);
        })
    }
}

组件/container.js

createTag () {
  //validatation & others....
  this.props.createTag(tag)
}

<<p> react-redux连接/strong>

function mapDispatchToProps (dispatch) {
    return bindActionCreators({
        createTag: createTag
    }, dispatch)
}

food/create.js中几乎相同的模式

$('#food-tags').select2(select2settings).on('select2:selecting', function (event) {
        let isNewTagCreated = event.params.args.data.newOption,
            name = event.params.args.data.text;
        if (isNewTagCreated && name !== '') {
            reactDOM.props.createTag({name}); // reactDOM = this context here
        }
    });

我想要的基本上是，我想要在组件级别访问哪个动作类型正在调度，这样我就可以从组件&同时显示通知而不是动作提示。也许是我想得不对。可以有一个非常简单的解决方法。

Answer 1

很高兴知道redux-thunk传递了函数的返回值。所以你可以从动作创建者那里返回承诺，然后等待它在你的组件代码中完成

export function createTag(tag) {
  return function (dispatch) {
    return axios.post(API_URL + 'api/tags', tag) // return value is important here
      .then((response) => dispatch({type: 'TAG_CREATE_RESOLVED', payload:response}))
      .catch((err) => {
        dispatch({type: 'TAG_CREATE_REJECTED', payload: err})
        throw err; // you need to throw again to make it possible add more error handlers in component
      })
  }
}

在你的组件代码

createTag () {
  this.props.createTag(tag)
    .then(() => {
      toastr.success('Tag created Successfully.......!');
      this.props.router.push() // I assume that you have wrapped into `withRouter`
    })
    .catch(err => {
       toastr.warning(err.message);
    });
}

现在你已经在操作逻辑和用户界面之间有了适当的分离。