Redux-Saga正在获取数据,但未更新状态

时间:2020-08-29 17:21:54

标签: javascript reactjs redux redux-saga

我在redux-saga中使用axios来获取一些数据。我在每一步都做了console.log(),以查看每一步的结果。即使我能够在控制台上成功打印所有获取的数据,唯一的事情是它不会更新状态,因为屏幕输出为空白,并且在DevTools中,我看到状态为空。

我的动作

export const listSearchBrewery = ( ) => {     // gets workerSaga to fetch the data
    return {
        type: LIST_SEARCH_BREWERY_REQUEST,
    };
};

export const listSetBrewerySuccess = ( breweries ) =>{    // updates the store and also for display
    return {
        type: SET_LIST_BREWERY_SUCCESS,
        breweries
    };
};

我的减速器

const initialState = {
    breweries: [],
}

const ListBreweryReducer = ( state = initialState, action) => {
    switch(action.type) {
        case types.listSearchBrewery:
            return { ...state };
        case types.listSetBrewerySuccess:
            return { ...state, breweries: action.breweries };
        default:
            return state;
    }
}

我的传奇

export function* watcherSaga() {
    yield takeLatest("LIST_SEARCH_BREWERY_REQUEST", workerSaga);
}

function fetchBreweryList() {
    return axios({
        method: 'get',
        url: 'https://api.openbrewerydb.org/breweries'
    });
}

function* workerSaga() {
    try{
        console.log("Entered worker saga.");
        const response = yield call(fetchBreweryList);
        const breweries = response.data;
        console.log("worker-saga executed.");

        yield put({ type: "SET_LIST_BREWERY_SUCCESS", breweries });
        console.log("store set");
        console.log(breweries[0]);        // successfully printing on the console
    }
    catch (error) {
        yield put({ type: "SET_BREWERY_ERROR", error });
    }
}

最后是我的组件

import React from 'react';
import { connect } from 'react-redux';
import { listSearchBrewery } from '../actions/index';

const ListBrewery = ( props ) => {
    const { brewery, getBreweryList} = props;

    return (
        <div className="Container">
                <button className="button" onClick={getBreweryList}>Brewerries</button>
            <div className="list">
                {brewery.map((item) => (
                    <div key={item.id}>
                        <p>{item.name} in {item.city}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

const mapStateToProps = state => {
    return {
        brewery: state.breweries,
        //error: state.error
    }
}

const mapDispatchToProps = dispatch => ({
    getBreweryList: () => dispatch(listSearchBrewery()),
});

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

在DevTools中,我可以看到SET_LIST_BREWERY_SUCCESS动作正在通过saga调度并正在获取所有数据: action-fetcching-data

但是状态为空: empty-state

我不知道哪里出了错!

0 个答案:

没有答案
相关问题