how to update and delete withdout reloading the page - reactjs

Question

I'm trying to update and delete some notes that are on cloud firestore via redux, every thing seems to work fine but i should reload the page to see the results
import { combineReducers } from 'redux';
import authReducer from './authReducer';
import noteReducer from './noteReducer';
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';
const rootReducer = combineReducers({
auth: authReducer,
note: noteReducer,
firestore: firestoreReducer,
firebase: firebaseReducer
});
export default rootReducer;
const store = createStore(rootReducer,
composeEnhancers(
applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
reduxFirestore(fbConfig),
reactReduxFirebase(fbConfig, {useFirestoreForProfile: true, userProfile: 'users', attachAuthIsReady: true})
)
);
this is my note action:
export const createNote = (note) => {
return (dispatch, getState, {getFirebase, getFirestore}) => {
const firestore = getFirestore();
const profile = getState().firebase.profile;
const authorId = getState().firebase.auth.uid;
firestore.collection('notes').add({
...note,
authorFirstName: profile.firstName,
authorLastName: profile.lastName,
authorId: authorId,
createdAt: new Date(),
})
.then(() => {
dispatch({type: 'CREATE_NOTE_SUCCESS', note});
})
.catch((err) => {
dispatch({type: 'CREATE_NOTE_ERROR', err});
})
};
};
export const updateNote = (updatedNote, id) => {
return (dispatch, getState, { getFirestore }) => {
const firestore = getFirestore();
firestore.collection('notes').doc(id.toString()).update({
...updatedNote,
createdAt: new Date(),
})
.then(() => {
dispatch({type: 'UPDATE_NOTE_SUCCESS'}, updatedNote)
})
.catch(() => {
dispatch({type: 'UPDATE_NOTE_ERROR'})
})
};
};
export const deleteNote = (id) => {
return (dispatch, getState, { getFirestore }) => {
const firestore = getFirestore();
firestore.collection('notes').doc(id.toString()).delete()
.then(() => {
dispatch({type: 'DELETE_NOTE_SUCCESS'}, id);
})
.catch(() => {
dispatch({type: 'DELETE_NOTE_ERROR'})
});
};
};
this is my notereducer
import * as actionTypes from '../actions/actionTypes';
import { updateObject } from '../../../shared/utility';
const initState = {
notes: [],
id: null,
error: null,
changed: false
};
const noteReducer = (state = initState, action) => {
switch (action.type) {
case actionTypes.CREATE_NOTE_SUCCESS:
return updateObject(state, {error: null , changed: true})
case actionTypes.CREATE_NOTE_ERROR:
return updateObject(state, {error: action.err});
case actionTypes.UPDATE_NOTE_SUCCESS:
return updateObject(state, {error: null, changed: true});
case actionTypes.UPDATE_NOTE_ERROR:
return updateObject(state, {error: action.err});
case actionTypes.DELETE_NOTE_SUCCESS:
return updateObject(state, {
notes: state.notes.filter(note => note.id !== action.id),
error: null,
changed: true
});
case actionTypes.DELETE_NOTE_ERROR:
return updateObject(state, {error: action.err});
default:
return state;
}
};
export default noteReducer;
here are some parts of my code, i don't know what part I've done wrong or what I've missed, i really appreciate your help