調度操作後Redux Thunk回調？

所以在我的陣營組成部分，我有這樣的：調度操作後Redux Thunk回調？

this.props.updateAlertCallback('error', ERROR_MESSAGE)

我updateAlertCallback操作是：

export const updateAlert = (alert, message) => { 
    return { 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    } 
} 

export const updateAlertCallback = (alert, message) => { 
    return dispatch => { 
    return dispatch(updateAlert(alert, message)).then(() => { 
     console.log('Done!'); 
    }); 
    } 
}

，我發現了以下錯誤：遺漏的類型錯誤：調度（...）。那麼是不是一個功能

運行完成後，什麼是正確的方式登錄的東西？

來源

2016-08-20 Drew

這有很多錯誤。首先，你不清楚你想要完成什麼。此外，你分配'數據'，然後立即檢查它是否真實。它始終是你分配它的原因。然後'updateAlert'不會返回任何東西。它應該返回一個動作，或者如果你需要使用某些東西，它應該返回一個函數。 – DDS

我也注意到你正在調用一個回調函數，但因爲你所有的代碼都是同步的（你不需要等待任何東西），所以根本就不需要回調。 – DDS

嗨@DDS，我繼續前進，並用我最新的情況更新了這個問題。我試圖在調用this.props.updateAlert之後從我的React組件啓動回調，而不是在動作中啓動回調。我想我越來越近了 - 你對這個更新的代碼有什麼想法嗎？ – Drew

function showAlert(message) { 
    return { 
    type: SHOW_ALERT, 
    message 
    }; 
} 

function hideAlert(message) { 
    return { 
    type: HIDE_ALERT, 
    }; 
} 

function flashAlert(message) { 
    return (dispatch) => { 
    dispatch(showAlert(message)); 
    setTimeout(() => { 
     dispatch(hideAlert()); 
    }, 5000); 
    } 
}

你需要終極版，形實轉換這個工作。然後，您可以使用this.props.flashAlert('Oh noes!!!!')和正確的mapStateToProps。還需要還原劑和反應組分。

褪色並不一定是一件容易的事情。我建議你保存一段時間。

flashAlert函數的作用是返回一個函數，該函數需要一個函數dispatch。這個功能可以做各種有趣的事情，但還沒有。首先將這個函數傳遞給redux的dispatch。這種派遣通常會拋出，因爲動作必須是簡單的對象。但是因爲你使用了redux-thunk，它會很好。 Redux-thunk將調用該函數並將其從redux傳遞給dispatch函數。現在函數將最終運行。它所做的第一件事是通過調用showAlert()發送一個動作。這一次它是一個具有type屬性的對象，這使它成爲一個適當的縮減操作。據推測，redux將把這個動作傳遞給我們的reducer，它將用新的信息更新狀態，但我們不知道這一點，因爲簡化起見，reducer沒有被回答。誰知道它包含哪些代碼。莫名其妙地改變了信息後，我們做了一個setTimeout()。當這個回調時，我們使用之前使用的相同的dispatch函數調用我們通過調用hideAlert()得到的另一個動作。我們仍然擁有它。這大概會清理國家的消息。

只要狀態發生變化，Redux就會反應重新渲染適當的組件。據推測，這些組件中的一個將根據具體情況顯示或不顯示該消息。

來源

2016-08-20 16:22:08 DDS

謝謝@DDS！我不知道你是否看到了，但我在我的要點上回復了你，在我調用組件中的showAlert屬性後，我基本上只是稱setTimeout。仍然使用redux-thunk並在showAlert在此操作中分派後有超時更合適嗎？考慮到目前的最佳實踐，因爲他們都能完成工作。 – Drew

使用redux-thunk更清潔。它打包了意圖並使其可重用。另外，請確保刪除之前的提醒，如果有的話。否則，如果兩個警報在5秒內被觸發，第二個警報將被第一個'setTimeout'關閉。 – DDS

redux中的操作是普通對象。 Redux thunk允許返回函數而不是對象。這些函數由thunk中間件執行，並且最終到達用於分派的商店的最終對象是普通對象。下面是一個redux thunked動作的例子。

來源

2016-08-20 02:18:47 vijayst

終極版，thunk是你的答案。在您的商店代碼更改

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
);

到

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f, 
    applyMiddleware(thunk) 
);

，你將能夠使用的thunk與終極版的行動。

參考https://github.com/gaearon/redux-thunk#installation

來源

2016-08-20 02:23:47 John

謝謝約翰。我做錯了什麼？下面是我一直在嘗試的一個要點：https://gist.github.com/drewrawitz/231ccc56bd442dae0ce009d23cd28373 – Drew

沒關係，問題出在我的商店。中間件從未被調用。我用我的新商店編輯了原來的問題，最終開始工作。 – Drew

隨着終極版，形實轉換，可以使操作返回一個承諾：

export const updateAlert = (alert, message) => (dispatch, getState) => { 
    dispatch ({ 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    }); 
    return Promise.resolve(getState()); 
    // or just Promise.resolve();

現在你可以調用updateAlert（XX，XX）。然後（newState => {...}）;

來源

2017-11-08 19:33:10 Phuhui

你是不是指在第二行發送'dispatch'而不是返回 – Swapnil

@Swapnil，是的。謝謝。 – Phuhui

調度操作後Redux Thunk回調？

回答

相關問題