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.