在生命周期方法中调度redux操作时,React组件卸载和重新装载

pprl5pva  于 2023-10-19  发布在  React
关注(0)|答案(1)|浏览(176)

我的团队正在开发的React + Redux Saga 应用程序就是这样
我们从Themeforest购买了React Isomorphic主题,它捆绑了Redux, Saga 和React Router V.4。我们现在正在努力解决这个问题。
我使用React已经有一段时间了,但对Redux来说是新的,从来没有经历过这样的行为。问题是,每当我分派一个操作时,组件都会随着状态的改变而卸载和重新装载
好的,我正在做的是从API中获取一些用户数据,但是。所以这就是我如何想出下面的动作& reducer

// Actions.js

const UserActions = {
    FETCH_USER_REQUEST: 'FETCH_USER_REQUEST',
    FETCH_USER_SUCCESS: 'FETCH_USER_SUCCESS',
    fetch_users: () => {
        return {
            type: UserActions.FETCH_USER_REQUEST
        }
    }
}

export default UserActions;

和减速器

// Reducer.js
export default function UserReducer(state = initialState, action) {
    switch (action.type) {
        case 'REQUEST_USER_SUCCESS':
            return state.set('user_list', action.user_list);
        default:
            return state;
    }
}

使用Redux Saga ,创建中间件来处理JavaScript操作。看起来是这样的

// Saga.js
import { all, takeEvery, call, put, fork } from 'redux-saga/effects';
import {get, post} from 'axios';

export function fetchUser() {
    return get('https://mockapi.testapp.dev/users')
    .then(response => {
         return response.data;
    }).catch(error => {
         return error.data
    });
}

export function* fetchUserRequest() {
    yield takeEvery('FETCH_USER_REQUEST', function*() {
        const resp = yield call(fetchUser);
        yield put({
            action: 'FETCH_USER_SUCCESS',
            user_list: resp
        });
    });
}

export default function* rootSaga() {
   yield all([
      fork(fetchUserRequest)
   ]);
}

现在我在组件中实现代码,如下所示:

// App.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import UserActions from './actions/UserAction';

const mapStateToProps = (state, ownProps) => {
    return {
        userList: state.User.get('user_list')
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchUser: () => dispatch(UserActions.fetch_users())
    }
}

class App extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }

    render() {
        // ... The rest of the rendering processes
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

现在你可以看到,在此之前提到的行为。通过this.props.fetchUser()调度一个动作会导致状态改变,但我不希望组件不应该卸载和重新挂载,因为一旦它这样做了,就会发生无限循环,因为componentDidMount会反复运行,状态也会相应地改变。
我所期望的是从API中获取数据,一旦组件安装,而不是重新安装本身,一旦状态因任何原因发生变化,因为我们购买的主题配备了其他基础组件,这些组件使用Redux-saga来处理状态和Reducc操作。例如,可扩展的侧边栏触发一个调度,该调度会更改控制其侧边栏的状态,或者一旦用户单击它。目前,一旦它这样做,我的当前组件立即意外卸载。
有没有可能的方法来解决这样的问题,或者这是Redux的默认行为?

t2a7ltrp

t2a7ltrp1#

在您的应用程序中使用BulletMode:当组件首次安装时:strictmode将模拟挂载、卸载和重新挂载,以检测代码中隐藏的任何bug。它是一个开发工具,试图帮助您找到代码中的错误。像使用效果中的不干净的副作用。它将运行useEffects两次。它还将检测弃用的代码,并在控制台中显示警告。
它是一个开发工具,可以帮助您找到与双重渲染或忘记清理副作用相关的代码中的错误。
如果你正在使用strictMode,你可能想尝试取消注解。看看能不能解决问题

相关问题