Question

我正在构建一个应用程序，该应用程序可以加载特朗普的推文并可视化它们。现在，我在.json文件中存储了这些推文，但最终我想异步调用一个API来获取这些推文。但是，我的reducer不断从default语句的switch子句引发新错误，我不知道为什么！目标是实现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'动作，但是我仍然从减速器中得到相同的错误。我假设我的减速器中有一些错误的逻辑，但是我不知道发生了什么。

Answer 1

这是因为Redux从@@redux/INIT操作开始，并且您在该操作上执行的reducer必须返回初始状态，而不要抛出：-）

默认情况下，在您的化径器中只需返回状态即可：

default:
   return state;

Answer 2

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

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

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

useDispatch（）从reducer抛出错误

2 个答案: