Redux-Saga App SyntaxError: Неожиданный токен <in JSON в позиции 0. Вышеупомянутая ошибка произошла в задаче, созданной sagaWatcher. - PullRequest
Новая
       103

Redux-Saga App SyntaxError: Неожиданный токен <in JSON в позиции 0. Вышеупомянутая ошибка произошла в задаче, созданной sagaWatcher.

0 голосов
/ 02 августа 2020

Мой код в codeandbox: https://codesandbox.io/s/runtime-cache-9b694?file= / src / actions. js

Я новичок в Redux-saga. Когда компонент установлен, получение данных и рендеринг в компонент. Данные успешно загружаются с сервера и устанавливаются в состояние . Но в конце консоли я получаю эту ошибку: 

SyntaxError: Unexpected token < in JSON at position 0
The above error occurred in task fetchData created by takeEvery(FETCH_DATA, fetchData)created by sagaWatcher
Tasks cancelled due to error: takeEvery(FETCH_DATA, fetchData)

Вот мой код:

компонент. js

const Lists = () => {
  const data = useSelector(state => state.results, shallowEqual);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(FETCH_DATA('https://rickandmortyapi.com/api/character'))
  }, [dispatch])

  return (
    data.map(item => <List val={item.name} key={item.id} />)
  )
};

действий. js

export const SET_CHARACTERS = (data) => ({
  type: 'SET_CHARACTERS',
  payload: data,
});

export const FETCH_FAILED = (payload) => ({
  type: 'FETCH_FAILED',
  payload,
});

export const FETCH_DATA = (url) => ({type: 'FETCH_DATA', payload: url});

редуктор. js

export const charactersReducer = (state = {results: []}, action) => {
  switch (action.type) {
    case 'SET_CHARACTERS':
      return {
        ...state,
        ...action.payload,
      };
    case 'FETCH_FAILED':
      return console.log('%cUSER FETCH FAILED: %s', 'color: red', action.payload);
    default:
      return state;
  }
}

getData. js

const fetchList = async (url) => {
  const rawData = await fetch(url);
  return await rawData.json();
};

сага. js

const sagaMiddleware = createSagaMiddleware();
const store = createStore(charactersReducer, compose(applyMiddleware(logger, sagaMiddleware), ReduxDevTools.instrument()));

function* fetchData(action) {
  const data = yield call(fetchList, action.payload);
  yield put(SET_CHARACTERS(data));
}

function* sagaWatcher() {
  yield takeEvery(FETCH_DATA, fetchData);
}

sagaMiddleware.run(sagaWatcher);

Что не так с моим кодом?

Как видно на скриншоте ниже, когда компонент установлен, я получаю данные и устанавливаю его на состояние и рендеринг в DOM. введите описание изображения здесь

Извините, если это повторяющийся вопрос, я не нашел ответа.

1 Ответ

0 голосов
/ 02 августа 2020

Наконец-то нашел здесь решение. Бесконечный l oop с redux-saga Проблема была в том, что в saga.js я помещал создателя действий в задачи takeEvery и call. На самом деле мне нужно было поставить строку. Теперь это работает. Возможно, этот вопрос будет полезен другим в будущем.

Спасибо, ребята.

...