在生命周期方法中分派 redux 操作时，React 组件会卸载和重新挂载

Question

我的团队正在开发的 React + Redux Saga 应用程序会出现这种情况

我们从 Themeforest 购买 React Isomorphic 主题，它捆绑了 Redux、Saga 和 React Router V.4。我们现在正在努力解决这个问题。

我已经使用 React 一段时间了，但对 Redux 还很陌生，从未经历过这种行为。问题是，每当我调度一个操作时，组件就会随着状态的变化而卸载并重新安装

好吧，我正在做的是从 API 中获取一些用户数据，但是。这就是我想出以下动作和减速器的方式

// 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，创建中间件来处理异步操作。这是它的样子

// 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 来处理状态和异步操作。例如，可折叠侧边栏会触发一个调度，一旦用户单击它，该调度就会更改控制其行为的状态。目前，一旦这样做，我当前的组件就会立即意外卸载。

有没有可能的方法来解决这样的问题，或者这是 Redux 的默认行为？

Answer 1

在应用程序中使用 StrictMode ：当组件首次安装时：strictmode 将模拟安装、卸载和重新安装，以检测代码中任何隐藏的错误。 它是一个开发工具，旨在帮助您发现代码中的错误。就像 use Effects 中不干净的副作用一样。它将运行 useEffects 两次。它还会检测已弃用的代码并在控制台中向您显示警告。

它是一个开发工具，可以帮助您找到代码中与双重渲染或忘记清理副作用相关的错误。

如果您正在使用 strictMode，您可能想尝试取消注释它。看看能不能解决问题