Nie jestem pewien, dlaczego otrzymuję następujące błędy.

Właśnie konfiguruję sklep, akcje i reduktorów, nie zadzwoniłem jeszcze do niczego.

Spodziewany

Aplikacja działa dobrze, stan Redux nie jest aktualizowany

Wyniki

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;
    }
}
48
Leon Gaban 28 czerwiec 2017, 02:33

4 odpowiedzi

Najlepsza odpowiedź

Twój problem polega na tym, jak importujesz reduktor {x0}}:

import { coins } from './coins'

Ten ostatni próbuje uzyskać nazwany eksport zwrócony z pliku w ./coins.

Nie używasz żadnych nazwanych eksportu tylko export default, dlatego wystarczy zaimportować plik w następujący sposób:

import coins from './coins';

Korzystanie z tego ostatniego spowoduje fakt, że coins będzie następnie zawierać wartość export default; które będą reduktor monet.

82
Pineda 30 lipiec 2017, 08:29

To była moja poprawka:

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

export default combineReducers({
    coinsState: coins || (() => null) // By adding this I resolved it.
});
3
gildniy 22 grudzień 2019, 23:45

Ach właśnie go znalazłem, importowałem ponownie reduktor monet ...

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

export default combineReducers({
    coins
});

Zamiast

import { coins } from './coins'
6
Leon Gaban 27 czerwiec 2017, 23:40

Nawet gdy wszystkie import są prawidłowo importowane, może to nadal zdarzyć się z innego powodu. Zależność kołowań!

W moim przypadku nastąpiło to ze względu na okrągłe zależność w pliku. Miałem dwa okrągłe raindecy w projekcie, który stworzyłem akcentowo. Przykład: rootReducer.ts -> authSlice.ts -> rootReducer.ts.

Zależności te często nie są tak łatwe do debugowania. Użyłem Pakiet, aby sprawdzić zależne zależności okrągłe. Po usunięciu zależności Okrągłej, wszystko było dobrze.

7
sasidhar 12 wrzesień 2020, 13:47