redux reducer payload.data not reflecting on front end

Question

I'm having trouble of my payload.data getting sent on my reducer It won't reflect on my front-end/UI after I made a request unless I refresh the whole page...can someone tell me where I went wrong with my approach since I'm a newbie in redux.

// here's my useState to submit

  const [supplier, setSupplier] = useState({
        _id: Localstorage.result._id, 
        token: Localstorage.token, 
        supplier_name: '', 
        address: '', 
        contact_person: '', 
        contact_number: '', 
        note: ''
    });

// to dispatch

dispatch(add_supplier(supplier));

// here's my redux thunk action

export const add_supplier = (supplier) => async (dispatch) => {
    try {
        const { data } = await api.add_supplier(supplier);
        dispatch({ type: 'ADD_SUPPLIER', data: data });
    } catch (error) {
        console.log({ 'error': error });
    }
}

// here's my redux state

const initialState = {
    store: {}
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_DB': return {
            ...state,
            store: action.payload
        }
        case 'ADD_SUPPLIER': return {
            ...state,
            store: {
                ...state.store,
                supplier: state.store.supplier.concat(action.data)
            }
        }
        default:
            return state;
    }
}

I'm not quite sure about my approach on 'ADD_SUPPLIER' reason why once I make a request it won't reflect on my UI after I made a request I need to refresh the page so it will reflect.

my backend works well the only problem is my redux state it doesn't reflect or show the data I sent unless I refresh the page.

redux reducer payload.data not reflecting on front end

0 Answers0