React и Redux: перенаправление после действия

Я разрабатываю веб-сайт с React/Redux, и я использую промежуточное ПО thunk для вызова моего API. Моя проблема касается перенаправления после действий.

Я действительно не знаю, как и где я могу сделать перенаправление: в моем действии, в редукторе, в моем компоненте, ... ?

мое действие выглядит так:

export function deleteItem(id) {
    return {
        [CALL_API]: {
            endpoint: `item/${id}`,
            method: 'DELETE',
            types: [DELETE_ITEM_REQUEST, DELETE_ITEM_SUCCESS, DELETE_ITEM_FAILURE]
        },
        id
    };
}

react-redux уже реализован на моем сайте, и я знаю, что могу сделать, как показано ниже, но я не хочу перенаправлять использование, если запрос не удалось:

router.push('/items');

спасибо!

11
react-router redux

3 ответов

обычно лучше перенаправить компонент следующим образом:

render(){
   if(requestFullfilled){
       router.push('/item')
   }
   else{
       return(
          <MyComponent />
       )
   }
}
7

наверняка не перенаправление от ваших редукторов, так как они должны быть без побочных эффектов. Похоже, вы используете api-redux-middleware, который, я считаю, не имеет обратного вызова успеха/сбоя/завершения, что, я думаю, было бы довольно полезной функцией для библиотеки.

в этом вопросе с middleware РЕПО, владелец РЕПО предлагает что-то вроде этого:

// Assuming you are using react-router version < 4.0
import { browserHistory } from 'react-router';

export function deleteItem(id) {
  return {
    [CALL_API]: {
      endpoint: `item/${id}`,
      method: 'DELETE',
      types: [
        DELETE_ITEM_REQUEST, 
        {
          type: DELETE_ITEM_SUCCESS,
          payload: (action, state, res) => {
            return res.json().then(json => {
              browserHistory.push('/your-route');
              return json;
            });
          },
        },
        DELETE_ITEM_FAILURE
      ]
    },
    id
  }
};

Я лично предпочитаю иметь флаг в моем подключении реквизит компонента, который, если true, будет маршрутизировать на страницу, которую я хочу. Я бы настроил componentWillReceiveProps следующим образом:

componentWillReceiveProps(nextProps) {
  if (nextProps.foo.isDeleted) {
    this.props.router.push('/your-route');
  }
}
12

в области Redux необходимо использовать react-redux-router push действий, вместо browserHistory.push 

import { push } from 'react-router-redux'

store.dispatch(push('/your-route'))
1