如何在ReactRedux中實時處理狀態

說我從fetch(api)調用中填充狀態。所以，下面是我的減速器：如何在ReactRedux中實時處理狀態

state.results.data：

[ 
    1: { 
    id: '1', 
    name: 'name1', 
    number: 11 
    }, 
    2: { 
    id: '2', 
    name: 'name2', 
    number: 22 
    }, 
    3: { 
    id: '3', 
    name: 'name3', 
    number: 33 
    } 
]

而且我通過map功能顯示這個在ListView。我有一個TouchableOpacity的onPressnumber = number+1。我通過dispatch和action來減速。像like按鈕。所以現在說2的值是：

2: { 
    id: '2', 
    name: 'name2', 
    number: 23  // <= number increased onPress. 
    }

我能夠做到這一點。該數字在視圖中實時更新。但是，我如何在數據庫上執行此操作。假設我通過node在回傳和傳遞查詢中有MySQL。我想我需要執行dispatch至action以增加number的值id=2，並將此呼叫發送至api至fetchpost。現在這需要一些時間。像第二個或第二個一樣，db中的實際數據與已經處於該狀態的數據不同。如何顯示id:2的更新信息或者什麼是最佳方式？

希望我解釋一下。隨時回答任何問題以進行澄清。

非常感謝。

來源

2017-09-16 Somename

您可以使用中間件，如redux-thunk。
這將讓你發送一個function而不是你通常應該做的事情，這是派遣一個Object。
現在，如果您可以派遣function該功能可以fetch甚至可能會返回promise。當這個承諾解決後，你可以像平常一樣派遣動作創建者。
例如：

// someActions.js 
export function updateSomething(id) { 
    return (dispatch) => { 
     dispatch({type: 'FETCH_IN_PROGRESS'}); 
     fetch(`myServer.com/updateSomething?id=${id}`) 
     .then((response) => response.json()) 
     .then((item) => dispatch({type: "SOMETHING_UPDATED", id})) 
    }; 
}

請注意，我並沒有包括錯誤處理，我強烈建議這樣做（如.catch）。

當你創建你的店，你應該注入這個中間件：

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

來源

2017-09-16 10:19:58

'。然後（（項目）=>訊（{類型：「SOMETHING_UPDATED」，ID}））'是那裏有我更新現有的狀態？我正在使用'redux-thunk'。 – Somename

是的，一個相關的'reducer'應該捕獲這個動作並返回新的狀態 –

你的意思是隻有該狀態的對象應該返回這個邏輯權限？而不是整個國家。測試代碼。 – Somename

如何在ReactRedux中實時處理狀態

回答

相關問題