ドメイン間での行動の共有

Question

通常、私はredux-sagaを使用しますが、現在はredux-thunkが必要です。私は、モジュラー構造のためのアヒルを使用していますし、今例えば私は2匹のアヒル持っている：authと以下の非同期アクションとuser：

のauth-duck.js

register(credentials) { 
    return dispatch => { 
     dispatch(actions.registerRequest()); 
     return service.requestRegister(credentials) 
      .then((response) => { 
       dispatch(actions.registerSuccess(...)); 

       // Here I need to dispatch some action from user-duck.js 
      }) 
      .catch(() => dispatch(actions.registerError(...))) 
    } 
} 

ユーザーduck.jsを

fetchUser() { 
    return dispatch => {...} 
} 

私は本当に知ってどのように台無しにしないこれら二つのモジュールと成功register後fetchUserを派遣していません。

register結果（例：トークンなど）をコンテナに返すことができました。ここから発送され、その後チェーンディスパッチfetchUserを使用しました。

AuthContainer.js

_onSubmit() { 
    this.props.register().then(() => this.props.fetchUser); 
} 

しかし、私は知りません、それはReduxの-サンクでこのような操作を管理するための最良の方法ですか？

Answer 1

長い検索の後、別々のドメインからロジックを共有する方法が2つ見つかりました。 最初の1はちょうどこのように、mapDispatchToProps（感謝@DonovanM）を使用することです：

function mapDispatchToProps(dispatch) { 
    return { 
     login: (credentials) => { 
      return dispatch(authActions.login(credentials)).then(
       () => dispatch(userActions.fetchUser()) 
      ); 
     } 
    } 
} 

login機能、我々は別のものにそれをチェーンことができる理由Promiseのthatsを返します。

そして第二に可能なオプション： 使用何か

それは アプリ-sagas.jsである私たちの場合は "ブリッジ" ファイルのようなアプリ-duck.js

import {actions as authActions} from './auth-duck.js'; 
import {actions as userActions} from './user-duck.js'; 

export function doLogin(credentials) { 
    return dispatch => { 
     return dispatch(authAction.login(credentials)).then(
      () => dispatch(userActions.fetchUser()) 
     ); 
    } 
} 

2番目のケースでは、すべてのロジックをアヒルに入れ、ロジックをコンテナ内に広げないようにすることができます。しかし、私は両方の方法を組み合わせることが可能だと思います。

Answer 2

サンクは1つのHTTP要求のみを作成するルールはありません。ログイン後にユーザーをフェッチする必要がある場合は、フェッチします。

const login = credentials => dispatch => { 
    fetchLogin(credentials).then(() => { 
     dispatch({ type: "LoginSuccess" }) 
     return fetchUser() 
    }).then(() => { 
     dispatch({ type: "UserFetched" }) 
    }) 
} 

ユーザーフェッチアクションを再利用する場合は、サンクからのサンクをディスパッチします。

const fetchCurrentUser = login => dispatch => { 
    return fetchUser(login.userId).then(user => { 
     dispatch({ type: "UserLoad" }) 
     return user 
    }) 
} 

const login = credentials => dispatch => { 
    return fetchLogin(credentials).then(login => { 
     dispatch({ type: "LoginSuccess" }) 
     return dispatch(fetchCurrentUser(login)) 
    } 
} 

私のアプリの1つでは、ログインに成功した後、7つのアクションサンクを呼びます。