Tengo una aplicación en React y Redux que trae contenido de un JSON local mediante axios
. Eso lo almaceno en el state mediante una action y un reducer.
Todo parece funcionar bien, hasta que intento mapear el array que viene en el JSON, para iterarlo, y noto que las props están vacías.
Hice un console.log
del state
dentro de mapStateToProps
, dentro del componente, y me devuelve dos logs: uno con el array vacío, y luego otro con los datos correspondientes.
¿Qué estoy haciendo mal que no puedo pasar el state como props a ese componente?
JSON
{
"items":
["item1", "item2", "item3", "item4"],
"itemDescriptions": [
{
"title": "Here the title",
}
]
}
Component.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './../actions';
class Content extends Component {
componentDidMount() {
this.props.fetchData();
}
renderData = () => {
if(docs) {
return this.docs.map(doc => {
return <h1>{doc}</h1>
});
}
return <h1>Empty</h1>
}
render() {
return (
<div>{this.renderData()}</div>
);
}
}
const mapsStateToProps = (state) => {
console.log(state)
return {
data: state.data
}
}
export default connect(mapsStateToProps, {
fetchData: fetchData
})(Content);
actions/index.js
import axios from 'axios';
export const fetchData = () => async (dispatch) => {
const localData = axios.create({
baseURL: 'http://localhost:3000/data'
})
const response = await localData.get('/data.json')
dispatch({
type: 'FETCH_DATA',
payload: response.data
});
}
reducers/index.js
import { combineReducers } from 'redux';
const dataReducer = (state = [], action) => {
switch (action.type) {
case 'FETCH_DATA':
return [...state, action.payload];
default:
return state;
}
}
export default combineReducers({
data: dataReducer
});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, /* preloadedState, */ composeEnhancers(applyMiddleware(thunk)));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));