当我尝试获取数据时，Redux操作将重复

Question

我试图通过仅获取必要的日期来创建更多功能，即下一个需要添加到我在Redux Store中的现有状态的日期，但是我遇到了问题，我的Redux操作是重复的。

组件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>
    </>
  );
}

创建商店

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

当我排除react.strictmode＆gt;一切都很好。

Answer 1

请参阅 link 。严格的模式可能导致多种方法调用多次。当组件首次安装时，最有可能您的REDUX跑了两次。您可以实现useref来检测初始安装，然后在

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