2017-02-04 205 views
0

我打電話給我的終極版中的一個之後進行該調用操作是這樣的:終極版,確保終極版完成

performAction(updatesomevalue); 

和我想的地方把我的狀態時,上面的動作完成:

sendState(state); 

如何鏈接這些調用?行動沒有回調,所以我不能使用這種方法,我想這可能不是這樣做的一種減少的方式呢?

+0

一個簡單的方法應該是通過redux動作處理代碼中的'setTimeout'調用將它添加到JS事件隊列中。當我需要副作用時,我已經完成了很多工作,但是如果您在'sendState'中修改狀態(在redux流程之外),您可能會遇到不好的時間。 – Josh

+0

如果您的意思是調用'performAction'的代碼需要在回調中傳遞,並且要使用結果,那麼我會說恕我直言,您應該嘗試將該回調中執行的任何操作轉移到事件流/還原狀態,以消除該回調的需要。我也這樣做過(承諾和行動回調),但在我看來,它更加脆弱和難以推理。 – Josh

回答

0

異步Redux的操作與終極版 - 咚

異步終極版動作打交道時,最簡單的解決方案是使用終極版-的thunk。

終極版,thunk的目的是,它使我們能夠調度功能的行動(而不是你可能習慣普通的舊對象)

我們爲什麼要派遣返回的功能操作?

這個問題可以改爲:爲什麼redux thunk一個有用的庫?

如果我們可以調度一個函數。然後這個函數可以被授予對redux store API的訪問權限,因此當將來調用該操作時,它可以訪問該商店的當前狀態和分派。有權訪問調度是至關重要的,因爲這意味着此功能可以派發額外的redux操作。下面是一個redux thunk動作創建器的示例,它遵循返回函數的redux-thunk簽名。

這個redux thunk動作創建器調度一個初始異步操作,例如調用一個外部API,然後用該異步API調用的結果更新狀態。

然後檢索新狀態並用於分派額外的動作。 爲了使第一個異步api成爲可能,我們使用同構獲取庫,這是一個基於promise的請求庫,這就是爲什麼我們能夠通過.then鏈接獲取,然後調用獲取返回一個可接受的承諾。

import fetch from 'isomorphic-fetch' 

// call api then update state and dispatch second sync action 
// based on new state 
function thunkActionCreator() { 
    return (dispatch, getState) => { 

    return fetch(`http://www.example.com/api/users/${id}`) 
      .then(response => { 
       // if request successful dispatch action 
       // using response data to change state 
       if (response.status !== 200) { 
       dispatch(firstAction(response.data)) 
       } 

       // get the new state 
       const secondState = getState() 

       // use this newState to dispatch a new action 
       dispatch(secondAction(secondState)) 
      }) 
    } 
} 

記住,你需要終極版,形實轉換添加到中間件鏈

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers/index'; 

// Note: this API requires [email protected]>=3.1.0 
const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 

由於終極版,thunk是一箇中間件的它坐落在中間件鏈。在任何redux應用程序中分派動作時,它會通過完整的中間件鏈,每個中間件都實現一些自定義功能,例如在redux-logger的情況下登錄哪個console.logs在應用程序中發生的操作。