react redux thunk not populating state object

Question

im having an issue with my code, its not populating the state object when state action is being performed. im new with redux

i have this code. so far that having an issue

this is the statement that will called the props.action fetchProjectFamilyList

case 'SubBusinessUnit':
    setProductFamilyDetailsObj([])
    if (selectedOption.id != 0) {
        props.actions.fetchDepartment(selectedOption.id)
        props.actions.fetchProjectFamilyList(selectedOption.id)
        console.log(props)
    }
    setDropdownDataInState(resetData, 'Department')
    setFormFields({
        ...formFields,
        'OtherNamedInsuredIndustry': {
            ...formFields.OtherNamedInsuredIndustry,
            value: ''
        },
        'NamedInsuredIndustry': {
            ...formFields.NamedInsuredIndustry,
            value: "",
            selectedId: 0
        },
        [fieldName]: {
            ...formFields[fieldName],
            value: selectedOption.description, selectedId: selectedOption.id
        }
    });
break;

and this is the code for the commonreducer

export const fetchProjectFamilyList = createAsyncThunk(types.FETCH_PROJECT_FAMILY_LIST,
    async (option, {getState, rejectWithValue}) => {

            const reduxThunkConfig = {
                checkStateData:getState().commonReducer.projectFamilyList && getState().commonReducer.projectFamilyList[option],
                rejectWithValue
            }
    
            const APIConfig = {
                URL: "eapi-referencedata/v1/lists/12?filterBySourceList=" + option + "&filterBySourceListValue=15",
                method:"getData",
            }
            console.log('fetchProjectFamilyList')
            return fetchCachedData(reduxThunkConfig, APIConfig);
    }
)

im using the builder in my case of course inistailstate is set

const initialState = {
    projectFamilyList:{},
}


builder.addCase(fetchProjectFamilyList.fulfilled, (state, action) => {
    const subDivision = action.meta.arg;
    return {
    ...state,
    projectFamilyList:{
        ...state.projectFamilyList,
        [subDivision]: action.payload},
        
}})

const commonActions = { ...actions, fetchProjectFamilyList }

export { commonActions, commonReducer}

this is the comment that accept the state as props. but the props productFamilyDetailsObj is empty object

<ProductFamilyComponent
    productFamilyDetailsObj={productFamilyDetailsObj}
/>

function ProductFamilyComponent({ productFamilyDetailsObj }) {
    return <div className="boxLayout">
        <p className="smallHeading">Product Families</p>
        {productFamilyDetailsObj.map((text, textIndex) => {
            let index = textIndex;
            return ( .... and so on

I hope theres someone who could help me resolving this. thank in advance.

react redux thunk not populating state object

0 Answers0