如何在异步操作后使用Redux检索状态数据？

我是使用Redux和Thunk的新手，我需要一些帮助，这对我来说是一个非常混乱的概念。我遵循了多个教程和视频，并使用Thunk中间件设法实现了异步操作。我基本上从我的服务器获取JSON数据，并相应地更新状态以启动，接收和错误操作（请参阅下面的代码）。我遇到的问题是当我使用Thunk动作创建器执行store.dispatch(fetchAllBugData())方法时，我可以看到Logger中间件具有它的工作原理，它首先执行开始动作设置fetching: true然后一旦有数据，我可以看到fetching: false我的所有数据都填充了我的错误数组。伟大的作品！如何在异步操作后使用Redux检索状态数据？

然而，我似乎无法弄清楚如何实际访问后，我店里的状态，如果我派遣后做一个console.log(store.getState())，它给我的状态数据被检索之前（也就是当fetching: true）。为什么是这样？在我的数据从提取中获取后我怎样才能访问状态，所以我实际上可以在我的应用程序中做一些有用的事情？

以下是我所有关于动作，缩减器和存储的代码。谢谢！

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

来源

2016-07-30 Dan

调度通过终极版，thunk的异步操作意味着你不会知道当商店的更新。通过回调订阅商店，当商店发生变化时，从商店获取新的状态，并执行您想要执行的任何操作。当然，订阅商店也用于处理同步更改。

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

如果您使用的是与Redux的反应，加react-redux，这将节省您的订阅在需要获取更新的状态，每个组件商店的麻烦。

来源

2016-07-30 20:52:15

如何在异步操作后使用Redux检索状态数据？

回答

相关问题