Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

117
Vistas
Change in state is not reflecting in component, state should return an array but returning an empty object

I am trying to do a react app that uses firebase. After changing state value in reducer and returning it, it is not updating props value accordingly.

Here is my reducer:

import {
ADD_NOTE,
ADD_SUBJECT,
ADD_TOPIC,
REMOVE_NOTE,
REMOVE_SUBJECT,
REMOVE_TOPIC,
UPDATE_NOTE,
UPDATE_SUBJECT,
UPDATE_TOPIC,
FETCH_ALL_DATA
} from '../action/action-types'

import { fetchAllSubjects } from '../controller/fetchAllSubjects'

const initialState = []

export const reducer =  async (state = initialState, action) => {
switch(action.type){
    case FETCH_ALL_DATA:
        let data = fetchAllSubjects()
        await data.then(result => {
            state = result
        })
        console.log('state : ', state);
        return state;
    default:
        return state
   }
}

Component I am trying to use state in:

import React, {useEffect} from 'react'
import { connect } from 'react-redux'
import { fetchAllData } from '../action/action'

const Subjects = ({data, fetchData}) => {


useEffect(() => {
    fetchData()
}, [])

return (
    <>
        {JSON.stringify(data)}
    </>
)
}

const mapStateToProps = state => ({
  data : state
})

const mapDispatchToProps = dispatch => ({
    fetchData: () => {
      dispatch(fetchAllData())
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Subjects);

My App.js :

import React from 'react'
import Subjects from './component/subjects'

// redux
import { Provider } from 'react-redux'
import store from './centralState/store'


const App = () => {

return(
   <Provider store={store}>
     <Subjects />
   </Provider>
)

}

export default App;

and redux store here :

import { createStore, combineReducers } from 'redux'

import { reducer } from '../reducer/reducer'

const rootReducer = combineReducers({
     reducer
})

const store = createStore(rootReducer)

export default store

It's first displaying output as :

{"reducer":{}}

in browser

and after some milliseconds prints state (which is an array of objects of size 2) in the console as I am printing is in reducer

Thank You.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda