我在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调度并正在获取所有数据:
我不知道哪里出了错!