useDispatch() 从 reducer 抛出错误答案

【问题标题】：useDispatch() throwing error from reduceruseDispatch() 从 reducer 抛出错误
【发布时间】：2019-06-11 20:11:52
【问题描述】：

我正在构建一个应用程序，可以加载特朗普的推文并将其可视化。现在，我在 .json 文件中有推文，但最终我想异步调用 API 来获取推文。但是，我的减速器不断从switch 语句中的default 子句抛出一个新错误，我不知道为什么！目标是实现FETCH_TWEETS_SUCCESS，因为我只是导入一个.json文件，所以应该保证。

编辑：回购在这里：https://github.com/inspectordanno/trump_tweets

我构建了一个useEffect() 钩子来获取数据。同样，现在我只是传递一个 .json 文件，所以整个练习有点矫枉过正。无论如何，这是我的应用程序，其中包含从 useDispatch() 钩子（来自 react-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 最新版本的 react-redux，以及所有东西的最新版本。我什至尝试注释掉 try/catch 块并仅调度 'FETCH_TWEETS_SUCCESS' 操作，但我的减速器仍然收到相同的错误。我假设我的减速器中有一些错误的逻辑，但我无法弄清楚发生了什么。

【问题讨论】：

你的意思是什么错误？ throw new Error() - 这个？还是其他？
是的。错误是从 reducer 的 default 子句中的 throw new Error() 抛出的。
我在上面添加了回购链接。此外，当我从默认子句中删除 throw new Error() 并替换为返回状态时，整个应用程序崩溃。
哦，对了，redux 先发送@@redux/INIT 操作。
您的<TrumpApp /> 尝试呈现自己。无限递归导致应用程序在一段时间后崩溃。

标签： reactjs redux react-redux react-hooks

【解决方案1】：

这是因为 Redux 以 @@redux/INIT 动作开始，并且你的 reducer 在这个动作上必须返回初始化状态而不是抛出:-)

默认情况下，在你的减速器中返回你的状态，如下所示：

default:
   return state;

【讨论】：

【解决方案2】：

您的代码正在使用@Oleksandr Nechai 建议的修改

请根据您的代码here找到工作示例

看来错误是由其他原因引起的

【讨论】：