#reactjs #redux #axios #next.js #redux-saga
#реагирует на #возвращение #аксиос #next.js #переделка-сага
Вопрос:
Мой вопрос в том, что при обновлении/перезагрузке следующего приложения js состояние хранилища redux не обновляется. У меня есть приведенный ниже код внутри компонента
const Landing = () =gt; { const freeADS = useSelector((state) =gt; state.ads.freeAds); //this states are working fine without page refresh useEffect(() =gt; { dispatch(fetchFreeAds()); }, []) return( {freeADS.map((data, i) =gt; { //some codings......... })} ) } export default Landing; повторный призыв к действию
export const fetchFreeAds = () =gt; { return { type: ActionTypes.FETCH_FREE_ADS } } после того, как сага rootsaga / watch получит запрос, я вызову обработчик, как показано ниже
export function* handleFreeAds() { const { response, error } = yield call(fetchFreeAds); if (response) { yield put({type:"SET_FREE_ADS", payload: response.data[0]}); } else{ } } фактический вызов api происходит здесь
export function fetchFreeAds() { return axios.get('http://xxxxxxxxxx') .then(response =gt; ({ response })) .catch(error =gt; ({ error })) } В данный момент я получаю эту ошибку. пожалуйста, окажите некоторую поддержку. Спасибо
Комментарии:
1. Связанные данные не заполняются до тех пор, пока API не вернется. Вы могли бы придать срезу состояния начальное состояние. Напр.
state = { ads: { freeAds: [] } }2.@slideshowp2 вот как управляют состоянием
export interface State{freeAds: null}export const adReducers = (state = {}, {type, payload}) =gt; { ...... }
Ответ №1:
Спасибо @slideshowp2
Проблема решена путем выполнения этой модификации майнера. Добавлены фриады:[ ] возврат в исходное состояние.
export interface State{ freeAds: null } export const adReducers = (state = {freeAds:[]}, {type, payload}) =gt; { switch(type) case ActionTypes.SET_FREE_ADS: return { ...state, freeAds: payload }; }