Wie Statusdaten nach dem asynchronen Aktionsversand mit Redux abgerufen werden?

Question

Ich bin neu in der Verwendung von Redux und Thunk und ich brauche Hilfe, es ist ein sehr verwirrendes Konzept für mich. Ich habe mehrere Tutorials und Videos verfolgt und mit der Thunk Middleware eine funktionierende asynchrone Aktion erhalten. Ich hole grundsätzlich JSON-Daten von meinem Server und aktualisiere den Zustand entsprechend für Start-, Empfangs- und Fehleraktionen (siehe Code unten). Das Problem, das ich habe ist, wenn ich die store.dispatch(fetchAllBugData()) Methode mit meinem Thunk Aktion Schöpfer ausführen, kann ich mit der Logger Middleware ich habe, dass es funktioniert es geht zuerst die Startaktionen Einstellung fetching: true dann, sobald es die Daten hat, kann ich fetching: false sehen und mein Bug-Array ist mit allen meinen Daten gefüllt. Großartig, das funktioniert!

jedoch, kann ich nicht scheinen, um herauszufinden, wie mein Geschäfts des in dem Zustand eigentlich danach zugreifen, wenn ich ein console.log(store.getState()) nach Dispatching tun, es gibt mir den Zustand, bevor die Daten abgerufen wurden (aka wenn fetching: true). Warum ist das? Wie kann ich auf den Status zugreifen, nachdem meine Daten vom Abruf abgerufen wurden, damit ich in meiner Anwendung tatsächlich etwas Nützliches damit tun kann?

Unten ist mein Code mit der Aktion, Reduzierung und speichern. Vielen Dank!

BugDataActions.js

export const fetchAllBugData =() => { 

    return (dispatch) => { 

     dispatch({type: FETCH_ALL_BUG_DATA_START}) 

    BugsApi.getBugData(data => { 

     dispatch({type: RECEIVE_ALL_BUG_DATA, payload: data}) 

    }, err => { 

     dispatch({type: FETCH_ALL_BUG_DATA_ERROR, payload: err}) 
    }) 

    } 

} 

BugDataReducer.js

const initialState = { 
    fetching: false, 
    fetched: false, 
    bugs: [], 
    fetcherr: null, 
    noresultserr: null 
} 

const bugDataReducer = (state = initialState, action) => { 

switch(action.type) { 

    case "FETCH_ALL_BUG_DATA_START": { 
    return { 
     ...state, 
     fetching: true 
    } 
    break; 
    } 

    case "RECEIVE_ALL_BUG_DATA": { 
    return { 
     ...state, 
     fetching: false, 
     fetched: true, 
     bugs: action.payload 
    } 
    break; 
    } 

    case "FETCH_ALL_BUG_DATA_ERROR": { 
    return { 
     ...state, 
     fetching: false, 
     fetcherr: action.payload 
    } 
    break; 
    } 
} 

return state; 
} 

configureStore.js

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

export default function configureStore() { 
return applyMiddleware(thunkMiddleware, loggerMiddleware()(createStore)(rootReducer) 
} 

Index.js

import configureStore from './store/configureStore' 
import {fetchAllBugData} from './actions/BugDataActions' 
import {fetchBugDataByParams} from './actions/BugDataActions' 

const store = configureStore() 
console.log(store.dispatch(fetchAllBugData())) 

Answer 1

eine Asynchron-Aktion über redux-Thunk Dispatching bedeutet, dass Sie nicht, wenn die Speicher-Updates kennen. Abonnieren Sie den Store über einen Rückruf, und wenn sich der Store ändert, holen Sie sich den neuen Status aus dem Store und führen Sie die gewünschte Aktion aus. Selbstverständlich wird das Abonnieren des Speichers auch für synchrone Änderungen verwendet.

store.subscribe(() => { 
    const state = store.getState(); 
    // do whatever you want with the new state 
}); 

Wenn Sie verwenden mit redux reagieren, fügen react-redux, die Ihnen mühsame die Zeichnung in den Laden in jeder Komponente speichern, die den aktualisierten Zustand erhalten muss.