состояние притока не меняется - PullRequest
Новая
       7

состояние притока не меняется

0 голосов
/ 14 октября 2018

Я использую стандартное ядро ​​Net React-Reux, и когда я запускаю действие fetch api, состояние редуктора не меняется вообще.

Вот мое действие 

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 в состояние, я даже попытался изменить метод редуктора и просто вернуть строку, но this.props.events снова возвращает пустой массив [].Я предполагаю, что мой редекс не работает, но я не знаю почему.Я отлаживал всю ночь 

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

}

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

axios.get () является асинхронной функцией.Вот почему вы не могли видеть обновленное состояние, когда регистрировали его сразу после извлечения событий.Я бы порекомендовал вам использовать redux-devtools-extension для отладки.Надеюсь это поможет.Ура!

0 голосов
/ 14 октября 2018

Я нашел ошибку.По какой-то причине мне пришлось вызывать this.props.events в методе render (), а не componentwillmount.

...