Это один из способов записи действий при использовании thunk, что приводит к очень простым сокращениям.
getCurrentUserPicture(){
return (dispatch,getState) => {
dispatch({type: "isloading", isLoading: true}); // shows a loading dialog
dispatch({type: "errorMessage"}); // clear errorMessage
dispatch({type: "warningMessage"}); // clear warningMessage
const userId = getState().user.get("currentUser").id;
getUserPicture(userId) // get from backend
.then(picture => {
dispatch({type: "userPicture", picture});
dispatch({type: "isLoading", isLoading: false});
}
)
.catch(e=>{
dispatch({type: "errorMessage", e});
dispatch({type: "isLoading", isLoading: true});
}
)
}
}
С редуктором, включая следующие:
export reducer(state = initialState, action = {}) {
switch(action.type) {
case "isLoading":
return state.set("isLoading", action.isLoading)
Вот еще один подход, когда действия "чище", но редукторы более сложны:
getCurrentUserPicture(){
return (dispatch,getState) => {
dispatch({type: "gettingCurrentUserPicture", true});
const userId = getState().user.get("currentUser").id;
getUserPicture(userId)
.then(picture => {
dispatch({type: "retrievedCurrentUserPicture", picture});
}
)
.catch(e=>{
dispatch({type: "errorRetrievedCurrentUserPicture", e});
}
)
}
}
В редукторе для вышеуказанного действия у вас будет, например:
export reducer(state = initialState, action = {}) {
switch(action.type) {
case "gettingCurrentUserPicture":
return state.set("isLoading", true)
.delete("errorMessage")
.delete("warningMessage")
Один подход лучше другого?
