Вопрос по react-router, redux – Я хотел бы не перенаправлять, а просто изменить состояние. Вы можете просто опустить результат идентификатора удаленного элемента:

15

рабатываю веб-сайт с помощью 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');

Спасибо!

Ваш Ответ

4   ответа
14

не делайте перенаправить с ваших редукторов, так как они должны быть без побочных эффектов. Похоже, что вы используете api-redux-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
  }
};

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

componentWillReceiveProps(nextProps) {
  if (nextProps.foo.isDeleted) {
    this.props.router.push('/your-route');
  }
}
Как вы потом сбросили этот флагisDeleted? Если кто-то вернется к этому компоненту, есть большая вероятность, что он будет автоматически перенаправлен, ничего не делая. Tomasz Mularczyk
Иисус Христос - этот ответ так удивителен! Я потратил так много времени на такой простой вопрос. Это решение элегантно и просто. Большое спасибо @Yo Wakita! Landeeyo
@ Tomasz У меня была такая же проблема. Разве это не обременительно, если новый компонент должен будет сбросить все переменные состояния, которые используются в этом процессе перенаправления Кажется громоздким. Ryan
1

В области видимости Redux должен использоваться response-redux-routerpush действие, а неbrowserHistory.push

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

store.dispatch(push('/your-route'))
прочитай это . Вы должны добавить коды, как этоmeta.stackoverflow.com/questions/251361/... isuruAb
0

а просто изменить состояние. Вы можете просто опустить результат идентификатора удаленного элемента:

// dispatch an action after item is deleted
dispatch({ type: ITEM_DELETED, payload: id })

// reducer
case ITEM_DELETED:
  return { items: state.items.filter((_, i) => i !== action.payload) }
7

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

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

Похожие вопросы