useDispatch () выдает ошибку от редуктора

Question

Я создаю приложение, которое загружает твиты Трампа и визуализирует их. Прямо сейчас у меня есть твиты в файле .json, но в конце концов я хочу вызвать API-интерфейс асинхронно для получения твитов. Однако мой редуктор продолжает выдавать новую ошибку из предложения default в операторе switch, и я не могу понять, почему! Цель состоит в том, чтобы добиться FETCH_TWEETS_SUCCESS, что должно быть гарантировано, поскольку я просто импортирую файл .json.

РЕДАКТИРОВАТЬ: репо здесь: https://github.com/inspectordanno/trump_tweets

Я построил useEffect() хук, который будет извлекать данные. Опять же, сейчас я просто передаю файл .json, поэтому все упражнение немного излишне. Как бы то ни было, вот мое приложение с действиями, отправляемыми с хука useDispatch(), нового хука от Reaction-redux:

import React, { useEffect } from 'react';
import tweets from '../../trump_r/tweets_cleaned.json';
import { useDispatch } from 'react-redux';

const TrumpApp = () => {
  const dispatch = useDispatch();

  useEffect(() => {  
    let didCancel = false;

    const fetchData = () => {
      dispatch({ type: 'FETCH_TWEETS_INIT' });
      try {
        if (!didCancel) {
          dispatch({ type: 'FETCH_TWEETS_SUCCESS', payload: tweets });
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_TWEETS_FAILURE' });
        } 
      }
    }
    fetchData();

    return () => {
      didCancel = true;
    };

  }, []);

  return (
      <h1>hello world</h1>
  );
}

export default TrumpApp;

Это мой редуктор:

const fetchTweetsReducerDefaultState = {
  isLoading: false,
  isError: false,
  data: 'data not loaded'
};

const fetchTweetsReducer = (state = fetchTweetsReducerDefaultState, action) => {
  switch (action.type) {
    case 'FETCH_TWEETS_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false
      };
    case 'FETCH_TWEETS_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload
      };
    case 'FETCH_TWEETS_FAILURE':
      return {
        ...state,
        isLoading: false,
        isError: true
      };
    default:
      throw new Error();
  }
}

export default fetchTweetsReducer;

Магазин находится здесь:

import { createStore, combineReducers } from 'redux';
import fetchTweetsReducer from '../reducers/fetchTweetsReducer';

export default () => {
  const store = createStore(
    combineReducers({
      tweets: fetchTweetsReducer,
    }),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  return store;
}

И, наконец, для хорошей меры, app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import TrumpApp from './components/TrumpApp';
// import 'normalize.css/normalize.css';
// import './styles/styles.scss';

const store = configureStore();

const jsx = (
  <Provider store={store}>
    <TrumpApp />
  </Provider>
);

ReactDOM.render(jsx, document.getElementById('root'));

У меня установлена ​​@next последняя версия response-redux и последняя версия всего. Я даже пытался закомментировать блок try/catch и просто отправлять действие 'FETCH_TWEETS_SUCCESS', но я все еще получаю ту же ошибку от моего редуктора. Я предполагаю, что в моем редукторе есть какая-то неисправная логика, но я не могу понять, что происходит.

Answer 1

Это потому, что Redux запускается с действия @@redux/INIT, и ваш редуктор для этого действия должен возвращать состояние инициализации, а не бросать: -)

В вашем редукторе по умолчанию просто верните ваше состояние так:

default:
   return state;

Answer 2

Ваш код работает с модификацией, предложенной @Oleksandr Nechai

Здесь вы можете найти рабочий пример на основе вашего кода здесь

Так что, похоже, ошибки вызваны чем-тоеще