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