小编Cha*_*arn的帖子

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

这是我的团队正在使用的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;
Run Code Online (Sandbox Code Playgroud)

和减速器

// 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;
    }
}
Run Code Online (Sandbox Code Playgroud)

使用Redux Saga,可以创建中间件来处理异步操作。看起来就是这样

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

export function fetchUser() …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router redux redux-saga

7
推荐指数
1
解决办法
2347
查看次数

标签 统计

javascript ×1

react-router ×1

reactjs ×1

redux ×1

redux-saga ×1