[解決済み] React-Redux - キー "coins" にレデューサーが提供されていません。

質問

なぜ以下のようなエラーが発生するのかわかりません。

ストア、アクション、リデューサをセットアップしただけで、まだ何もディスパッチを呼び出していません。

期待されること

アプリは正常に動作しているが、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;
    }
}

解決方法は？

この問題は、あなたがインポートした coins レジューサーを使用します。

import { coins } from './coins'

後者は、./coinsにあるファイルから返された名前付きエクスポートを取得しようとするものです。

名前付きエクスポートのみを使用していない export default そのため、以下のようにファイルをインポートするだけです。

import coins from './coins';

後者を使用すると、結果として coins の値が含まれるようになります。 export default コインリデューサーになります。