redux actions are duplicated when I try to fetch data

Question

I am trying to create load more functionality by fetching only the necessary date i.e. the next one that needs to be added to the existing state that I have in the redux store, but I have a problem my redux actions are duplicated.

Component App.js

function App() {
  const dispatch = useDispatch();
  const data = useSelector(questionsData);

  useEffect(() => {
    const fetchQuestions = async () => {
      dispatch(fetchQuestionsBegin());
      try {
        const { data } = await mainUrl(`/questions?last=5`);
        return dispatch(fetchQuestionsSuccess(data));
      } catch (err) {
        return dispatch(fetchQuestionsFailure());
      }
    };
    fetchQuestions();
  }, [dispatch]);

  return (
    <>
      <div>TEST</div>
    </>
  );
}

creating store

const store = configureStore({
  reducer: {
    questionsStore: questionsReducer,
  },
});

export default store;

slice

const initialState = {
  loading: false,
  questions: [],
  error: "",
};

const questionsSlice = createSlice({
  name: "questions",
  initialState,
  reducers: {
    fetchQuestionsBegin(state) {
      return { ...state, loading: true, error: "" };
    },
    fetchQuestionsSuccess(state, action) {
      return {
        ...state,
        loading: false,
        questions: [...state.questions, ...action.payload],
      };
    },
    fetchQuestionsFailure(state, action) {
      return { ...state, loading: false, error: action.payload };
    },
  },
});

export const { reducer: questionsReducer, actions } = questionsSlice;

export const {
  fetchQuestionsBegin,
  fetchQuestionsSuccess,
  fetchQuestionsFailure,
} = actions;

redux

When I exclude <React.StrictMode> everything works fine.

Does this answer your question? [Why is my React component is rendering twice?](https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice) — Silviu Burcea, Jun 14 '22 at 10:29
@SilviuBurcea it works when I comment React.StrictMode, but is there any other way to solve this ? — Erol, Jun 14 '22 at 11:43
is there any other solution to resolve this except comment strict mode — Erol, Jun 14 '22 at 14:19

score 0 · Answer 1 · answered Jun 14 '22 at 10:37

Refer to link. Strict mode can cause multiple methods to invoke multiple times. Its most likely that your redux is ran twice when the component mounts for the first time. You can implement useRef to detect initial mount and then conditionally render after

  const isMounted = useRef(false)
  useEffect(() => {
    isMounted.current = true;
  }, [])


  useEffect(() => {
    if (isMounted.current) {
       const fetchQuestions = async () => {
         dispatch(fetchQuestionsBegin());
         try {
           const { data } = await mainUrl(`/questions?last=5`);
           return dispatch(fetchQuestionsSuccess(data));
         } catch (err) {
           return dispatch(fetchQuestionsFailure());
         }
       };
       fetchQuestions();
    }
  }, [dispatch]);

redux actions are duplicated when I try to fetch data

1 Answers1