Question

我正在尝试使用react-redux构建一个应用程序但是当使用api获取数据异步而不是数据即将到来但状态和存储未更新时请帮助.. 这是我的的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import configureStore from './store/configurestore'
import AppRouter from './routers/Approuter'
import {fetchReports} from './actions/reports'
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const store = configureStore();
const state = store.getState();

const AppRoute = (

<Provider store={store}>
<AppRouter/>
</Provider>
)

ReactDOM.render(<p>Loading...</p>, document.getElementById('root'));
registerServiceWorker();
store.dispatch(fetchReports(state)).then(()=> {
    console.log(store.getState())
    ReactDOM.render(AppRoute, document.getElementById('root'));
    registerServiceWorker();
})

reports.js（操作文件）这是我正在执行异步操作的操作文件

export const addReport = (reports) => {
    return {
        type: 'ADD_REPORT',
        reports
    }    
}

export const saveReports = (reportData = {}) => {
    return dispatch => {
        const {
            r_id=0,
            reg_date ='',
            reg_no = 0,
            patient_name ='',
            gender ='',
            age = 0,
            mobile_number = '',
            email_id = '',
            refer_by = '',
            test_request = '',
            report_status = '',
            total_amt = 0,
            receipt_amt = 0,
            bal_amt = 0 
        } = reportData
        const reports = {r_id, reg_date, reg_no, patient_name, gender, age, mobile_number , email_id , refer_by, test_request , report_status , total_amt, receipt_amt, bal_amt}

        return fetch('http://localhost/aruna/addreport.php',{
            method:'POST',
            body: JSON.stringify(reportData)
        }).then(reportData => dispatch(addReport(reportData.reports))
    )}
}

export const setReports = (reports) => {
    return {
        type:'SET_REPORTS',
        reports
    }
}

export const fetchReports = () => {
        return (dispatch) => {
           return fetch('http://localhost/aruna/getreports.php').then((response) =>{
            const reports = [];
            Object.keys(response).forEach((report) => {
                reports.push({
                   r_id:report.key,
                 ...report 
                })
            })
            dispatch(setReports(reports))
           })
}
}

这是我的reducer文件

const reportsDefaultstate = []

export default (state=reportsDefaultstate, action ) => {
    switch (action.type){
        case 'ADD_REPORT':
            return [
                ...state,
                action.reports
            ]
        case 'SET_REPORTS':
            return action.reports
        default:
            return state
    }
}

我的 configureStore.js 文件

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension';
import reportsReducer from '../reducers/reportreducer'
import filterReducer from '../reducers/filterreducer'


export default () => {
    const store = createStore(
        combineReducers({
            reports: reportsReducer,
            filters: filterReducer
        }),
        composeWithDevTools(
            applyMiddleware(thunk)
        )

    )
    return store;
}

如何在此处使用所获取的数据更新商店或状态。请帮我看一下这段代码中的错误

不更新商店仍然显示空的react-redux

0 个答案: