如何在组件未重新渲染时获取更新的 redux-toolkit 状态

Question

我正在尝试删除 redux 工具包中的项目，但不知道如何，删除功能只能在屏幕上使用，我必须按两次才能删除前一个

这里是reducer

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);
     
    });
    
  },
});

这是我使用它的函数： 代码已更新

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>
  );
}

我必须按两次才能让它工作，例如，我有 4 个项目，当我按一个时，屏幕上的项目消失但数据日志仍然有 4 个项目，当我点击另一个时，它显示 3在 console.log 但屏幕显示 2，redux 状态在 return() 之外发生变化，但我无法捕获更新的状态，它在前一个

这是一个 gif 来展示发生了什么

当我只按一个项目时，它在 UI 上改变，但当我刷新它时 return 相同的状态

当我点击两次或更多次时，它会更改之前的内容

已更新

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);

我也通过这个添加了 useEffect，但问题是当我记录功能的变化时，它保持不变：

Answer 1

这是正确记录更新数据的方法，因为状态更新是异步的，它不会在您发送时立即更改 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>
  );
}

关于重新加载问题，请尝试关闭应用程序然后像您的应用程序用户那样打开它 (minimize the app -> remove the app from recently opened apps -> open app again )，而不是重新加载项目。

如何在组件未重新渲染时获取更新的 redux-toolkit 状态

How to get updated redux-toolkit state when component is not re-render

javascript

reactjs

redux

redux-toolkit