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

【问题标题】：React-Redux - No reducer provided for key "coins"React-Redux - 没有为关键“硬币”提供减速器
【发布时间】：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;
    }
}

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案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()

【讨论】：