web-dev-qa-db-fra.com

React-Redux - Aucun réducteur fourni pour les "pièces" clés

Je ne sais pas pourquoi je reçois les erreurs suivantes.

Je suis en train de configurer mon magasin, mes actions et mes réducteurs, je n'ai encore rien appelé.

Attendu

L'application fonctionne correctement, l'état Redux n'est pas mis à jour

Résultats

enter image description here

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);

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

export default combineReducers({
    coins
});

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
    }
}

import { ADD_COIN } from './actions'

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_COIN:
            return action.portfolio;
        default:
            return state;
    }
}
javascriptreactjsreduxreact-redux
31
Leon Gaban

Votre problème réside dans la façon dont vous importez votre réducteur coins:

import { coins } from './coins'

Ce dernier essaie d’obtenir une exportation nommée retournée du fichier dans ./coins.

Vous n'utilisez aucune exportation nommée uniquement export default, il vous suffit donc d’importer le fichier comme suit:

import coins from './coins';

L'utilisation de ce dernier entraînera le fait que coins contiendra alors la valeur de export default; qui sera le réducteur de pièces.

65
Pineda

Ah, je viens de le trouver, j'importais mal mon réducteur de pièces ...

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

export default combineReducers({
    coins
});

au lieu de

import { coins } from './coins'
6
Leon Gaban