当我尝试获取数据时，redux 操作重复答案

【问题标题】：redux actions are duplicated when I try to fetch data当我尝试获取数据时，redux 操作重复
【发布时间】：2022-06-14 18:27:19
【问题描述】：

我正在尝试通过仅获取必要的日期来创建加载更多功能，即下一个需要添加到我在 redux 存储中的现有状态的日期，但我有一个问题，我的 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;

切片

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

当我排除时一切正常。

【问题讨论】：

这能回答你的问题吗？ Why is my React component is rendering twice?

标签： reactjs redux react-redux redux-thunk redux-toolkit