redux 状态设置、状态再水化和API调用正在发生两次

tct7dpnv  于 2023-05-23  发布在  其他
关注(0)|答案(1)|浏览(191)

我在用

apisauce: ^2.1.6,
react: 18.1.0,
react-native: 0.70.4,
react-redux: ^8.0.4,
redux: ^4.2.0,
redux-logger: ^3.0.6,
redux-persist: ^6.0.0,
redux-saga: ^1.2.1

我面临的问题是,每次我打开和关闭应用程序或设置状态或点击API时,都会发生两次。有人能帮我吗?

我希望setState、rehydration和API调用应该只命中一次

Store.js

import { configureStore } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import logger from 'redux-logger';
import { applyMiddleware, combineReducers } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
import creatSagaMiddleware from 'redux-saga';

import rootSaga from '../sagas/rootSaga';
import loaderReducer from '../reducers/loaderReducer';

const sagaMiddleware = creatSagaMiddleware();
const middlewares = [sagaMiddleware, logger];

const config = {
    key: 'root',
    debug: true,
    whitelist: [],
    storage: AsyncStorage,
};

const reducers = persistReducer(config, combineReducers({
    loader: loaderReducer
}));

export const store = configureStore({
    reducer: reducers,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ immutableCheck: false, serializableCheck: false }).concat(middlewares),
    enhancers: [applyMiddleware(...middlewares), devToolsEnhancer({ realtime: true })]
});
sagaMiddleware.run(rootSaga);
export const persistor = persistStore(store);

reducer.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  isLoading: false,
  message: ''
};

export const loaderReducer = createSlice({
  name: 'loader',
  initialState,
  reducers: {
    setLoader: (state, action) => {
      state.isLoading = action && action.payload ? action.payload.isLoading || false : false;
      state.message = action && action.payload ? action.payload.message || '' : '';
    }
  }
});

export const { setLoader } = loaderReducer.actions;

export default loaderReducer.reducer;

rootSaga.js

import { all } from 'redux-saga/effects';

import {
    watchGenerateImageThumbnail
} from './userServiceSagas';

function* rootSaga() {
    yield all([
        watchGenerateImageThumbnail()
    ]);
};

export default rootSaga;

userServiceSagas.js

import { call, put, takeEvery } from 'redux-saga/effects';

import types from '../reducers/types/types';
import * as userServiceApis from '../services/user-service';
import { setLoader } from '../reducers/loaderReducer';
export function* generateImageThumbnail(action) {
    try {
        if (action && action.params && action.params.background != true)
            yield put(setLoader({ isLoading: true, message: 'Getting Payment Intent...' }));

        const generateImageThumbnailResponse = yield call(userServiceApis.generateImageThumbnail, action.params);
        if (action && action.params && action.params.background != true)
            yield put(setLoader(null));

        if (generateImageThumbnailResponse.status != 200)
            return action.onError(generateImageThumbnailResponse.originalError.message || generateImageThumbnailResponse.data);

        return action.onSuccess(generateImageThumbnailResponse.data);
    } catch (error) {
        if (action && action.params && action.params.background != true)
            yield put(setLoader(null));
        action.onError(error);
    }
}

export function* watchGenerateImageThumbnail() {
    yield takeEvery(types.GENERATE_IMAGE_THUMBNAIL, generateImageThumbnail);
}
uqdfh47h

uqdfh47h1#

我认为这是因为你正在StrictMode中运行你的ReactApp,转到index.js(主js文件)并删除StrictMode。

相关问题