在生命周期方法中分派redux操作时，对组件进行卸载和重新安装

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，您可能想尝试取消注释它。让我们看看是否能解决问题