web-dev-qa-db-ja.com

React and Redux：アクション後にリダイレクト

React/Reduxを使用してWebサイトを開発し、サンクミドルウェアを使用して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');

ありがとう！

reduxreact-router
17
vermotr

通常は、次のようにコンポーネントをリダイレクトすることをお勧めします。

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

副作用がないため、リデューサーからのリダイレクトは絶対にしない。 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');
  }
}
16
Yo Wakita

Reduxスコープでは、browserHistory.Pushの代わりにreact-redux-router Pushアクションを使用する必要があります

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

store.dispatch(Push('/your-route'))
1
Igor Stetsiura

リダイレクトするのではなく、状態を変更したいだけです。削除されたアイテムIDの結果を単に省略できます。

// 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) }
0
Bhojendra Rauniyar