Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

105
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!