redux 状态没有改变答案

【问题标题】：redux state not changingredux 状态没有改变
【发布时间】：2019-03-19 02:14:47
【问题描述】：

我使用的是 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);

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

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

}

【问题讨论】：

我认为您在致电axios.get(url) 时应该使用await 或callback。因为它是异步的
即使我返回{ type: FETCH_EVENTS, payload: "hello" };我还是看不到你好

标签： redux react-redux

【解决方案1】：

我发现了错误。出于某种原因，我不得不在 render() 方法中调用 this.props.events 而不是 componentwillmount。

【讨论】：

【解决方案2】：

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

【讨论】：