навигации после завершения Сформируйте реагировать/Redux путь

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

Нет ничего плохого в том, что вы принимаете. Похоже, ты пользуешься редукцией. Я не думаю, что лучше всего реагировать на события в компоненте. Единственные способы сделать это (я могу придумать) - создать какое-то специальное промежуточное программное обеспечение для проверки типа действия, а затем вызвать метод на вашем компоненте (пожалуйста, не делайте этого) или использовать ваши редукторы, чтобы поддерживать некоторое состояние вокруг в компоненте, таком как 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} 

...

Вы также можете создавать декларативные эффекты, используя функцию call в Redux Saga