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

【问题标题】：How to get updated redux-toolkit state when component is not re-render组件未重新渲染时如何获取更新的 redux-toolkit 状态
【发布时间】：2022-01-06 02:33:23
【问题描述】：

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

这里是减速器

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 .log 但屏幕显示 2，redux 状态在return() 之外发生变化，但我无法捕获更新的状态，它可以在前一个状态下工作

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

当我只按下一个项目时，它会在 UI 上发生变化，但当我刷新它时会返回相同的状态

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

更新

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，但问题是当我记录功能更改时，它保持不变：

【问题讨论】：

state.persistedReducer 是什么，你也可以添加persistedReducer 代码吗？
您还尝试在组件从 redux 重新渲染之前记录 data。使用useEffect 触发[data]，如果您想知道何时发生变化（您可以在那里console.log）。
@shubhamjha 当然，我现在就添加它
@Nathan 感谢您的回答，但我如何存储更改？我可以将它存储在 useState 中吗？
我更新了代码，请帮忙

标签： javascript reactjs redux redux-toolkit

【解决方案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)，而不是重新加载项目。

【讨论】：