在Redux中調用異步調用的動作

我正在將我的項目從flux轉換爲redux。在Redux中調用異步調用的動作

根組件是非常簡單的終極版：使用mapToProps

import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux' import AppReducer from './AppReducer' import { createStore } from 'redux' const store = createStore(AppReducer) ReactDOM.render( <Provider store={store}> //rest of application goes here </Provider>, app);

，mapToDispatch我能對付的成分，它的水平就好行爲。

現在我來到服務器響應，即異步調用。

在我通量實現我有一個文件調用「服務器」我有我的AJAX調用，並返回一個承諾，然後調用AppDispatcher.dispatch：

function handleResponse(endpoint) { 
    return function (err, res) { 
    if (res && res.ok) { 
     receiveData(endpoint, res); 
    } 
    }; 
} 

function receiveData(endpoint, responseData) { 
    AppDispatcher.dispatch(
    { 
     type: ActionTypes.SERVER_RESPONSE, 
     endpoint: endpoint, 
     state: "ReponseIsOK", 
     payload: responseData.body 
    } 
); 
    dispatch(endpoint, "CommunicationState.RESPONSE_OK", responseData.body); 
}

我應該如何轉換成這redux？

我需要以某種方式獲取到調度員，我希望像這樣的工作：

function receiveData(endpoint, responseData) { 

let store = Provider.getStore(); 
    store.dispatch(
    { 
     type: ActionTypes.SERVER_RESPONSE, 
     endpoint: endpoint, 
     state: "ReponseIsOK", 
     payload: responseData.body 
    } 
); 
}

我已經試過provider.store，provider.context.store，他們似乎也不工作。

我真的只需要訪問商店，以便我可以觸發事件，但不知道如何訪問它。

來源

2017-10-11 Oliver Watkins

我很確定這是一個使用Redux-Thunk的情況，它允許您異步調度操作。

下面是從文檔的解釋：

終極版咚中間件允許你寫行動創造者返回一個函數，而不是一個動作。 thunk可以用來延遲一個動作的發送，或者只在滿足某個條件時才發送。內部函數接收存儲方法dispatch和getState作爲參數。

我覺得你首先需要修改你的店的創建，並通過在終極版，形實轉換的中間件，然後你可以修改你receiveData功能是這樣的：

function receiveData(endpoint, responseData) { 
    return (dispatch, getState) => { 
     // DISPATCH YOUR ACTION WITH RESPONSE DATA 
     // AND ACCESS THE REDUX STORE   
    } 
}

來源

2017-10-11 14:00:50 melmquist

但我如何訪問了Redux店？ –

with'getState（）'所以如果「foo」是你想要訪問的商店屬性將是'var foo = getState（）。foo' – melmquist

@OliverWatkins如果你問「如何」Thunk獲得訪問到商店，我相信當你將它作爲中間件傳遞給'createStore（）'時，就會得到它。請參閱文檔中的[安裝部分]瞭解如何操作]（https://github.com/gaearon/redux-thunk#installation） – melmquist

你當您使用configureStore創建時，只需要保存對store的引用即可。如果你想從外面訪問，你可以設置一個getter。

僞代碼：

var store = configureStore() 

// ...  

export function getStore() { 
    return store 
} 

// ... 

<Provider store={ store } />

來源

2017-10-11 14:04:01

在Redux中調用異步調用的動作

回答

相關問題