Jak získat aktualizovaný stav redux-toolkit, když komponenta není znovu vykreslena

Snažím se odstranit položku v redux toolkitu, ale nevím jak, funkce odstranění funguje pouze na obrazovce, musím dvakrát stisknout, abych smazal předchozí

Zde je redukce

const noteReducer = createSlice({
  name: "note",
  initialState: NoteList,
  reducers: {
    addNote: (state, action: PayloadAction<NoteI>) => {
      const newNote: NoteI = {
        id: new Date(),
        header: action.payload.header,
        note: action.payload.note,
        date: new Date(),
        selectStatus: false,
      };
      state.push(newNote);
    },
    removeNote: (state, action: PayloadAction<NoteI>) => { // 
 ======> Problem here
      return state.filter((item) => item.id !== action.payload.id);
    },
    toggleSelect: (state, action: PayloadAction<NoteI>) => {
      return state.map((item) => {
        if (item.id === action.payload.id) {
          return { ...item, selectStatus: !item.selectStatus };
        }
        return item;
      });
    },
    loadDefault: (state) => {
      return state.map((item) => {
        return { ...item, selectStatus: false };
      });
    },
    resetNote: (state) => {
      return (state = []);
    },

    editNote: (state, action: PayloadAction<NoteI>) => {
      return state.map((item) => {
        if (item.id === action.payload.id) {
          return {
            ...item,
            note: action.payload.note,
            header: action.payload.header,
            date: action.payload.date,
          };
        }
        return item;
      });
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchNote.fulfilled, (state, action) => {
      state = [];
      return state.concat(action.payload);
     
    });
    
  },
});

Zde je funkce, kde ji používám:CODE UPDATED

export default function NoteList(props: noteListI) {
  const { title, note, id, date } = props;
  const data = useSelector((state: RootState) => state.persistedReducer.note);
   useEffect(() => {
    currentDate.current = data;
  }, [data]);
  const removeSelectedNote = () => {
    dispatch(removeNote({ id: id }));
    console.log(data);  ====> still log 4 if i have 4
  };
 console.log(data); // ====> work if i log here but a lots of logs

  return (
    <View>
      <TouchableOpacity
        onLongPress={() => {
          removeSelectedNote();
          console.log("current", currentDate.current);   ///same
        }}
        // flex
        style={CONTAINER}
        onPress={() =>
          !toggleSelectedButton ? onNavDetail() : setEnableToggle()
        }
      >
        <Note
          note={note}
          header={title}
          date={date}
          id={id}
          selectedStatus={selectedButtonStatus}
        />
      </TouchableOpacity>
    </View>
  );
}

Musím stisknout dvakrát, aby to fungovalo, například mám 4 položky, když stisknu jednu, položka na obrazovce zmizí, ale v datovém protokolu jsou stále 4 položky, když kliknu na jinou, zobrazí se 3 na console.log, ale na obrazovce se zobrazí 2, stav redux se změní mimo return() ale nemohu zachytit aktualizovaný stav, funguje to předchozí

Zde je gif, který ukazuje, co se děje

Když stisknu pouze jednu položku, změní se v uživatelském rozhraní, ale když ji obnovím, vrátí se do stejného stavu

Když kliknu dvakrát nebo vícekrát, změní se předchozí

Aktualizováno

Kód redux-persist:

const reducer = combineReducers({
  note: noteReducer,
  firebase: authentication,
});
const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  blacklist: [],
};

const persistedReducer = persistReducer(persistConfig, reducer);
const store = configureStore({
  reducer: { persistedReducer, toggle: toggleReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const persistStorageNote = persistStore(store);

Tímto jsem také přidal useEffect, ale problém je, že když zaznamenám změny ve funkci, zůstanou stejné:

Odpověď

takto můžete správně protokolovat aktualizovaná data, protože aktualizace stavu je asynchronní a nemění se okamžitě, když odešlete removeNote

export default function NoteList(props: noteListI) {
  const { title, note, id, date } = props;
  const data = useSelector((state: RootState) => state.persistedReducer.note);
  // log changed data
   useEffect(() => {
     console.log(data); 
  }, [data]);
  const removeSelectedNote = () => {
    dispatch(removeNote({ id: id }));
  };
 

  return (
    <View>
      <TouchableOpacity
        onLongPress={() => {
          removeSelectedNote();
        }}
        // flex
        style={CONTAINER}
        onPress={() =>
          !toggleSelectedButton ? onNavDetail() : setEnableToggle()
        }
      >
        <Note
          note={note}
          header={title}
          date={date}
          id={id}
          selectedStatus={selectedButtonStatus}
        />
      </TouchableOpacity>
    </View>
  );
}

pokud jde o problém s opětovným načítáním, zkuste aplikaci zavřít a otevřít jako uživatel vaší aplikace (minimize the app -> remove the app from recently opened apps -> open app again ), místo opětovného načtení projektu.