React-Redux - 没有为关键的“硬币”提供减速器

Question

不知道为什么我收到以下错误。

我只是在设置我的商店，动作和减速器，我还没有调用任何东西。

预计

应用运行良好，Redux 状态未更新

结果

源代码/索引.js

import * as api from '../../services/api'
import { storage, addToPortfolio } from '../../services/coinFactory'

export const ADD_COIN = 'ADD_COIN'

export function getCoin(coin) {
    return dispatch => {
        api.getCoin(coin)
            .then((res_coin)  => addToPortfolio(res_coin))
            .then((portfolio) => dispatch(updatePortfolio(portfolio)));
    }
}

export function updatePortfolio(portfolio) {
    return {
        type: ADD_COIN,
        portfolio
    }
}

src/reducer/index.js

 import { combineReducers } from 'redux' import { coins } from './coins' export default combineReducers({ coins });

src/reducer/actions/coins.js

 import * as api from '../../services/api' import { storage, addToPortfolio } from '../../services/coinFactory' export const ADD_COIN = 'ADD_COIN' export function getCoin(coin) { return dispatch => { api.getCoin(coin) .then((res_coin) => addToPortfolio(res_coin)) .then((portfolio) => dispatch(updatePortfolio(portfolio))); } } export function updatePortfolio(portfolio) { return { type: ADD_COIN, portfolio } }

最后 src/reducer/coins/index.js

 import { ADD_COIN } from './actions' const initialState = []; export default (state = initialState, action) => { switch(action.type) { case ADD_COIN: return action.portfolio; default: return state; } }

Answer 1

您的问题在于您如何导入coins减速器：

import { coins } from './coins'

后者尝试获取从 ./coins 中的文件返回的命名导出。

您没有使用任何命名导出仅export default ，因此您只需要按如下方式导入文件：

import coins from './coins';

使用后者将导致coins将包含export default ； 这将是硬币减少器。

Answer 2

即使您的所有导入都已正确导入，由于另一个原因，这种情况仍然可能发生。 循环依赖！

就我而言，这是由于文件中的循环依赖而发生的。 我在偶然创建的项目中有两个循环依赖。 示例： rootReducer.ts -> authSlice.ts -> rootReducer.ts 。

这些依赖项通常不那么容易调试。 我使用这个包来检查循环依赖。 一旦删除了循环依赖，一切都很好。

Answer 3

啊刚刚找到它，我错误地导入了我的硬币减速器......

import { combineReducers } from 'redux'
import coins from './coins' // because I have coins/index.js

export default combineReducers({
    coins
});

而不是

import { coins } from './coins'

Answer 4

这是我的修复：

import { combineReducers } from 'redux'
import { coins } from './coins'

export default combineReducers({
    coinsState: coins || (() => null) // By adding this I resolved it.
});

Answer 5

就我而言，我没有向减速器添加默认属性。 当我添加它时，它起作用了。 这是我的代码；

const counterReducer = (state = 0, action) => {
    switch(action.type){
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
          return state - 1;
      default:
        return state;    
    }
  }
  
export default counterReducer;

和组合文件；

import   counter   from './counter';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    counter: counter,
   
});

export default allReducers;