62

反応コンポーネントの非常に単純なセットがあります。

  • containerreduxにフックし、アクション、ストア サブスクリプションなどを処理する
  • list私のアイテムのリストを表示します
  • newリストに新しいアイテムを追加するためのフォームです

次のように、いくつかの反応ルータールートがあります。

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

そのため、listまたは のいずれかformが表示されますが、両方は表示されません。

私がやりたいことは、新しいアイテムが正常に追加されたら、アプリケーションをリストに再ルーティングすることです。

これまでの私の解決策は.then()、 async の後にあることdispatchです:

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

これはこれを行う正しい方法ですか、それともルート変更をトリガーするために何らかの方法で別のアクションを起動する必要がありますか?

4

5 に答える 5

29

Redux Routerのようなより完全なソリューションを使用したくない場合は、次のようなコードを記述できるRedux History Transitionsを使用できます。

export function login() {
  return {
    type: LOGGED_IN,
    payload: {
      userId: 123
    }
    meta: {
      transition: (state, action) => ({
        path: `/logged-in/${action.payload.userId}`,
        query: {
          some: 'queryParam'
        },
        state: {
          some: 'state'
        }
      })
    }
  };
}

これはあなたが提案したものに似ていますが、もう少し洗練されています。内部では同じ履歴ライブラリを使用しているため、React Router と互換性があります。

于 2015-10-03T12:09:32.387 に答える
26

大まかに次のような非常にシンプルなミドルウェアを作成しました。

import history from "../routes/history";

export default store => next => action => {

    if ( ! action.redirect ) return next(action);

    history.replaceState(null, action.redirect);
}

successfulしたがって、そこから、アクションにプロパティがあることを確認する必要がありredirectます。また、このミドルウェアは をトリガーしないことに注意してくださいnext()。これは、ルート トランジションがアクション チェーンの最後にある必要があるため、意図的なものです。

于 2015-09-18T09:35:57.860 に答える
19

isomorphic-fetchなどの使用法を抽象化するためにミドルウェア API レイヤーを使用していて、たまたまredux-thunkdispatchを使用している場合は、次のようにアクション内で Promiseを簡単にチェーンできます。

import { push } from 'react-router-redux';
const USER_ID = // imported from JWT;

function fetchUser(primaryKey, opts) {
    // this prepares object for the API middleware
}

// this can be called from your container
export function updateUser(payload, redirectUrl) {
    var opts = {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    };
    return (dispatch) => {
        return dispatch(fetchUser(USER_ID, opts))
            .then((action) => {
                if (action.type === ActionTypes.USER_SUCCESS) {
                    dispatch(push(redirectUrl));
                }
            });
    };
}

これにより、ここで提案されているようにライブラリをコードに追加する必要が減り、redux-history-transitionsで行われるように、アクションをリダイレクトとうまく同じ場所に配置できます。

私のお店はこんな感じです。

import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
import api from '../middleware/api';
import { routerMiddleware } from 'react-router-redux';

export default function configureStore(initialState, browserHistory) {
    const store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, api, routerMiddleware(browserHistory))
    );

    return store;
}
于 2016-03-28T19:42:07.113 に答える
0

react-reduxとreact-routerを使用している場合は、このリンクが優れたソリューションを提供すると思います。

私が使用した手順は次のとおりです。

  • コンポーネントを react-router コンポーネント内でレンダリングするか、 を使用して高次コンポーネントを作成することにより、react-router historyprop をコンポーネントに渡します。<Route/>withRouter
  • 次に、リダイレクト先のルートを作成します (私は mine と呼びましたto)。
  • history3 番目に、 と の両方を使用して redux アクションを呼び出しますto。
  • 最後に、リダイレクトする場合 (たとえば、redux アクションが解決する場合)、 を呼び出しますhistory.push(to)。
于 2018-10-10T22:21:06.447 に答える