0

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'));
1
  • ¿Podrías poner el código en JsFiddle o algún sitio similar? Sería de gran ayuda el 17 feb. 2019 a las 13:18

2 respuestas 2

0

En mapsStateToProps estás asignando lo retornado al prop data

const mapsStateToProps = (state) => {
    console.log(state)
    return {
        data: state.data
    }
}

sin embargo, al renderear la información, estás accediendo a this.docs

renderData = () => {
    if(docs) {
        return this.docs.map(doc => {
          return <h1>{doc}</h1>
        });
    }
    return <h1>Empty</h1>
}

basado en el json que muestras, deberías acceder a this.props.data.items al momento de iterar.

1
  • ¡Gracias! Eso solamente fue un typo cuando generé el post aquí. el 22 feb. 2019 a las 13:08
0

El problema era que se estaba generando un array nuevo dentro de otro porque en el reducer escribí return [...state, action.payload, cuando en realidad, para agregar al array existente debe escribirse return [...state, ...action.payload]. No había nada en mis props más que un array anidado dentro de otro, por eso no podía mapearlo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.