Question

我有一个动作，我打电话来保存Brand，如下所示：

export function createBrand(props) {
  return function(dispatch) {
  postData('brands', props)
    .then(response => {
      dispatch({
        type: CREATE_BRAND_SUCCESS,
        payload: response
      });
      browserHistory.push("/brands/" + response.data.id);
    }).catch(err => {
      dispatch({type: CREATE_BRAND_ERROR});
    });
  }
}

这是从组件调用的。我的问题在于browserHistory.push("/brands/" + response.data.id);，它将用户带到他们刚刚保存的品牌的编辑页面。这是适当的方式/地方吗？我应该响应组件本身的CREATE_BRAND_SUCCESS调度事件吗？如果是这样，那会是什么样的？

Answer 1

您采取的方法没有任何问题。看起来你正在使用redux-thunk。我不认为这是回应组件中事件的最佳做法。这样做的唯一方法（我能想到的）是创建一些自定义中间件来检查操作类型，然后在组件上调用方法（请不要这样做）或使用reducers来保留一些在responsesFromApi: [response1, response2]等组件中陈述。

我最喜欢的方法是使用工具让我在减速机中启动declarative effects，同时保持减速机纯净。 Redux Loop和我自己的redux-funk启用了此功能。我喜欢这种方法，因为答案是＆＃34;当这个动作被发送时会发生什么？＆＃34;可以在一个地方找到（减速器）。声明效果更容易测试。

因此，您使用redux-funk执行此操作的方式是：

// in component.js in mapDispatchToProps
dispatch({
    type: REQUEST_CREATE_BRAND, ...brandObject
});

// in reducer
const requestCreateBrand = brandName => postData('brands', brandName).catch(() => {type: CREATE_BRAND_FAILURE})

const navigateToBrand = id => browserHistory.push(`/brands/${id}`)

...

case REQUEST_CREATE_BRAND:
     call(action, [requestCreateBrand, [action.brandName]])
     return {...state, isRequesting: true}
case CREATE_BRAND_SUCCESS:
     call(action, [navigateToBrand, [id]])
     return {...state, isRequesting: false, brands: {...state.brands, [action.brandId]: action.brand}

...

您还可以使用Redux Saga

中的call功能创建声明效果

在表单完成后导航react / redux方式

1 个答案: