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.jsimport 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.