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

Posted 2023-02-22

【中文标题】React-Redux - 没有为关键“硬币”提供减速器

【英文标题】：React-Redux - No reducer provided for key "coins"

【发布时间】：2017-12-01 04:06:41

【问题描述】：

不知道为什么会出现以下错误。

我只是设置了我的 store、actions 和 reducer，我还没有调用 dispatch。

预期

App 运行正常，Redux 状态未更新

结果

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

import  createStore, applyMiddleware, compose  from 'redux'
import  Provider  from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

import App from './App'
import css from './coinhover.scss'

const element = document.getElementById('coinhover');

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

ReactDOM.render(
    <Provider store= store >
        <App />
    </Provider>, element);

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;
    

【参考方案1】：

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

import  coins  from './coins'

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

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

import coins from './coins';

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

【参考方案2】：

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

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

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

【讨论】：

救了我。谢谢

你也救了我！谢谢！

【参考方案3】：

啊，刚刚找到了，我的硬币减速器导入不正确...

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

export default combineReducers(
    coins
);

而不是

import  coins  from './coins'

【讨论】：

您的更正是正确的，但您的推理不正确。请看我的回答。问题的原因是您没有使用coins的命名导出

如果有人仍然感到困惑，只需在进口声明中从硬币中删除

【参考方案4】：

这是我的解决方法：

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

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

【参考方案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;

【参考方案6】：

如果没有什么对你有用，这可能是一个循环依赖。我有一个需要在切片中存储状态的项目。没有使用商店，而是有一个可用的 thunk 可以在不导入商店本身的情况下为您提供状态。如果你有这种极端情况，你可以从 thunk 中获取状态。

thunkAPI.getState()