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

新手上路,请多包涵

不确定为什么会出现以下错误。

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

预期的

应用程序运行正常,Redux 状态未更新

结果

在此处输入图像描述

源代码/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;
    }
}

原文由 Leon Gaban 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 330
2 个回答

您的问题在于您如何导入 coins reducer:

 import { coins } from './coins'

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

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

 import coins from './coins';

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

原文由 Pineda 发布,翻译遵循 CC BY-SA 3.0 许可协议

即使您的所有导入都已正确导入,由于其他原因仍可能发生这种情况。循环依赖!

在我的例子中,这是因为文件中的循环依赖而发生的。我在我偶然创建的项目中有两个循环依赖。示例: rootReducer.ts -> authSlice.ts -> rootReducer.ts

这些依赖项通常不容易调试。我用 这个 包来检查循环依赖。删除循环依赖后,一切都很好。

原文由 sasidhar 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题