Question

我正在使用Net Core，React-Redux样板，并且当我运行fetch api操作时，reducer状态根本不会改变。

这是我的行动

import axios from "axios";
import config from '../config';

const ROOT_URL = config[process.env.NODE_ENV].api;

export const FETCH_EVENTS = "FETCH_EVENTS";
export function fetchEvents() {
    const url = ROOT_URL +"/Event/GetAllEvents";
    const request = axios.get(url);

    return {
        type: FETCH_EVENTS,
        payload: request
    };
}

我的索引减少器：

import { combineReducers} from 'redux';
import { routerReducer } from 'react-router-redux';
import dataReducer from './dataReducer'

    const reducers = {
        events: dataReducer
    };

const rootReducer = combineReducers({
    ...reducers,
    routing: routerReducer
});

export default rootReducer;

和我的减速器

import { FETCH_EVENTS } from "../actions/ExtractActions";

export default function (state = [], action) {
    switch (action.type) {
        case FETCH_EVENTS:
            console.log("inside reducer")
            return [action.payload, ...state];
    }
    return state;
}

因此我将以下代码添加到Home组件中：

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchEvents }, dispatch);
}

function mapStateToProps(state) {
    return {
        events: state.events
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

但是当我尝试运行操作并尝试查看reducer状态是否已更改时，我在控制台日志上获得了一个空数组“ this.props.events”。即使我试图将api数据存储到状态，我什至尝试修改reducer方法并简单地返回一个字符串，但是this.props.events再次返回一个空数组[]。我猜我的redux无法正常工作，但我不知道为什么。我整夜都在调试

componentWillMount() {
    this.props.fetchEvents()
    console.log(this.props.events)

}

Answer 1

我发现了错误。由于某些原因，我不得不在render（）方法中调用this.props.events，而不是componentwillmount。

Answer 2

axios.get（）是一个异步函数。这就是为什么在获取事件后立即记录更新状态时看不到更新状态的原因。我建议您使用redux-devtools-extension进行调试。希望这可以帮助。干杯！

redux状态不变

2 个答案: