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

时间:2018-01-30 04:25:55

标签: javascript reactjs redux react-router 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的默认行为?

0 个答案:

没有答案