在域之間共享動作

通常我使用redux-saga，但目前我需要使用redux-thunk。我使用了模塊化結構，鴨，現在比如我有兩隻鴨子：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); 
}

但我不知道是不是與終極版-的thunk來管理這樣的操作的最佳方式？

來源

2017-06-25 Piroru

只要'_onSubmit'在將來沒有變得更復雜，似乎*好的*。我可能會把這個邏輯放在'mapDispatchToProps'內，而不是個人。這樣你的組件就不需要知道任何關於這些動作的信息。 – DonovanM

@DonovanM是的，你說得對，'mapDispatchToProps'更好然後在組件 – Piroru

經過長時間的搜索，我發現了兩個選項如何共享來自不同域的邏輯。 第一個是使用mapDispatchToProps（感謝@DonovanM），就像這樣：

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

login函數返回Promise這就是爲什麼我們可以把它鏈另一個。

而第二可能的選項：使用類似我們的情況下，「橋」的文件是APP-sagas.js

APP-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()) 
     ); 
    } 
}

在第二種情況下，我們可以將所有邏輯放入鴨子中，避免在容器內傳播邏輯。但我想可以將這兩種方法結合起來。

來源

2017-06-28 15:18:00 Piroru

沒有規則thunk只能發出一個HTTP請求。如果您需要在登錄後獲取用戶，請取回。

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

如果要重新使用用戶提取操作，請從thunk調度thunk。

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)) 
    } 
}

在我的一個應用程序中，我成功登錄後調用7個動作thunk。

來源

2017-06-28 16:56:59 AJcodez

方法謝謝** @ AJcodez **爲您的答案。鴨子的想法是有獨立的模塊，以提供鬆散的耦合。所以登錄鴨子一定不知道用戶鴨子的任何信息。 – Piroru

在域之間共享動作

回答

相關問題