0
1.4K
ViewsReact-Redux: no se proporciona reductor para "monedas" clave
No estoy seguro de por qué recibo los siguientes errores.
Solo estoy configurando mi tienda, acciones y reductores, todavía no he llamado a despacho por nada.
Esperado
La aplicación funciona bien, el estado de Redux no se actualiza
Resultados
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/reductor/index.js import { combineReducers } from 'redux' import { coins } from './coins' export default combineReducers({ coins }); src/reductor/acciones/monedas.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/reductor/monedas/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; } }3 answers
Answer question0
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 ; que será el reductor de monedas.
0
Incluso cuando todas sus importaciones se importan correctamente, esto aún puede suceder por otra razón. ¡Dependencia circular!
En mi caso, esto sucedió debido a una dependencia circular en un archivo. Tenía dos dependencias circulares en el proyecto que creé de forma accesoria. Ejemplo: rootReducer.ts -> authSlice.ts -> rootReducer.ts .
Estas dependencias a menudo no son tan fáciles de depurar. Usé este paquete para buscar dependencias circulares. Una vez que se eliminó la dependencia circular, todo estuvo bien.
0
Ah lo acabo de encontrar, estaba importando mi reductor de monedas de forma incorrecta...
import { combineReducers } from 'redux' import coins from './coins' // because I have coins/index.js export default combineReducers({ coins });en vez de
import { coins } from './coins'