type tutorial switch reducer react actions javascript reactjs redux react-redux

javascript - tutorial - switch react redux



React-Redux-No se proporcionan reductores para las "monedas" clave (2)

No estoy seguro de por qué estoy recibiendo los siguientes errores.

Estoy configurando mi tienda, acciones y reductores, todavía no he llamado a ningún despacho.

Esperado

La aplicación funciona bien, el estado de Redux no se actualiza

Resultados

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


Ah, acabo de encontrarlo, estaba importando mi reductor de monedas incorrectamente ...

import { combineReducers } from ''redux'' import coins from ''./coins'' // because I have coins/index.js export default combineReducers({ coins });

en lugar de

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


Su problema radica en cómo está importando su reductor de coins :

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

Este último intenta obtener una exportación con nombre devuelta desde el archivo en ./coins.

No está utilizando ninguna exportación con nombre, solo export default , por lo tanto, solo necesita importar el archivo de la siguiente manera:

import coins from ''./coins'';

El uso de este último resultará en el hecho de que las coins contendrán el valor export default de export default ; Que será el reductor de monedas.