导航形式完成后的反应/ Redux的方式

问题描述：

我有我打电话保存Brand，看起来像这样的动作：导航形式完成后的反应/ Redux的方式

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调度事件做出响应吗？如果是这样，那会是什么样子？

创建使用call函数的声明影响这看起来完全罚款我。我认为听取CREATE_BRAND_SUCCESS没有任何好处。这种方法是否给你一些限制，或者你只是确保你遵循最佳实践？ –

只是想确保我遵循最佳做法，并为我的降压功能获得最大的回报。谢谢。 – Gregg

答

您采取的方法没有任何问题。看起来你正在使用redux-thunk。我不认为这是对组件中的事件做出回应的最佳做法。唯一能做到这一点的方法就是创建一些自定义中间件来检查动作类型，然后调用组件的方法（请不要这么做），或者使用你的减速器来保持某种状态在像responsesFromApi: [response1, response2]这样的组件中。

我最喜欢的方法是使用工具让我在减速器中启动declarative effects，同时保持减速器纯正。 Redux Loop和我自己的redux-funk启用了此功能。我喜欢这种方法，因为可以在一个地方找到“减少此行为时发生的情况”的答案。声明效果更容易测试。

所以，你会用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

导航形式完成后的反应/ Redux的方式

相关推荐