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.