I'm trying to use a boolean to toggle a delete icon, but i don't know how the dispatch did'nt fire:

Here is the reducer

import { createSlice } from "@reduxjs/toolkit";

const NoteToggle = {
  enableDeleteButton: false,
};

const toggleReducer = createSlice({
  name: "toggleReducer",
  initialState: NoteToggle,
  reducers: {
    On: (state) => {
      const newToggle = { ...state, enableDeleteButton: true };
      console.log("new toogle", newToggle);
      
    },
    Off: (state) => {
      const newToggle = { ...state, enableDeleteButton: false};
      return newToggle;
    },
  },
});
export default toggleReducer.reducer;
export const { On, Off } = toggleReducer.actions;

Here is where i use selector, file called note.tsx

export default function Note(props: NoteItemI) {
  const { note, header, date } = props;
  const toggleDeleteStatus = useSelector(
    (state: RootState) => state.toggle.enableDeleteButton
  );

  const dateFormat = new Date(date);
  const showDate = dateFormat.toLocaleString("default", {
    month: "short",
    day: "2-digit",
  });
  console.log("show date", typeof date);

Here is where i use dispatch, file called note-list

export default function NoteList(props: noteListI) {
  const { title, note, id, date } = props;
  const nav = useNavigation();
  console.log("DaTe", new Date(date).getFullYear());
  const onNavDetail = () => {
    nav.navigate("Edit note", {
      date: date,
      note: note,
      header: title,
      id: id,
    });
  };
  const dispatch: AppDispatch = useDispatch();
  const toggleDeleteButton = () => {
    dispatch(On);
  };
  return (
    <View>
      <TouchableOpacity
        onLongPress={() => {
          dispatch(On);
          console.log("is clicked");
        }}
        flex
        style={CONTAINER}
        onPress={onNavDetail}
      >
        <Note note={note} header={title} date={date} />
      </TouchableOpacity>
    </View>
  );
}

But feel like dispatch did'nt fire, please help, thank you a lots

CodePudding user response：

dispatch action builders return a function.

So, change dispatch(On) to dispatch(On())