Alt 通量操作：即使调用 this.generateActions，_this.actions 也未定义

Posted 2023-02-22

【中文标题】Alt 通量操作：即使调用 this.generateActions，_this.actions 也未定义

【英文标题】：Alt flux action: _this.actions is undefined even when this.generateActions is called

【发布时间】：2016-08-08 08:30:35

【问题描述】：

我在我的 React/Flux 项目中使用 Alt 库来表示 Flux 部分，并且我得到了动作创建者。

我创建了以下操作：

// alt.js
import Alt from 'alt';

export default new Alt();

// UserActions.js
import alt from '../alt';

class UserActions 
    constructor() 
        this.generateActions(
            'getUsersSuccess',
            'getUsersFailed'
        );
    

    getUsers(userId) 
        $.ajax( url: '/api/users/'+userId )
        .done((data) => 
            this.actions.getUsersSuccess(data);
        )
        .fail((jqXhr) => 
            this.actions.getUsersFailed(jqXhr);
        );
    


export default alt.createActions(UserActions);

问题是动作，this.actions，是未定义的。我是否理解正确，this.generateActions 函数应该填充 UserActions 类的 actions 属性，还是我需要编写其他内容才能使操作可用？

我相信，使用 ES6，匿名函数中的 this 应该正确地绑定到 UserActions 类的 this。

【参考方案1】：

我不知道 Alt 的实现最近是否发生了变化，但我必须手动使用 dispatch 编写动作代码，以使其正常工作，并直接调用这些函数，而不是尝试使用 @987654321 访问它们@属性。

这是我得到的代码，它可以成功加载以存储和映射动作应该被映射的方式。

import alt from '../alt';

class UserActions
    getUsers(userId) 
        $.ajax(url: 'api/users/'+userId)
            .done((data) => 
                this.getUsersSuccess(data);
            )
            .fail((jqHxr) => 
                this.getUsersFail(jqHxr);
            );
        return false;
    

    getUsersSuccess(data) 
        return (dispatch) => 
            dispatch(data);
        
    

    getUsersFail(jqHxr) 
        return (dispatch) => 
            dispatch(jqHxr);
        
    


export default alt.createActions(UserActions);

使用这种方法，构造函数中的generateActions 调用不仅没有必要，而且需要避免，否则使用该动作创建器的商店将不知道您要使用哪个动作。

我还在 getUsers 函数的末尾添加了 return false 以抑制 alt 引发的控制台警告（函数未调度时必须返回 false）。

此处调度的操作，getUsersSuccess 和 getUsersFail，应该在存储中具有消耗参数并影响状态的对应物。

【讨论】：

感谢分享您的解决方案，我遇到了同样的问题

【参考方案2】：

没有必要再使用action了，试试吧：

// alt.js
import Alt from 'alt';
export default new Alt();

// UserActions.js
import alt from '../alt';

class UserActions 
    constructor() 
        this.generateActions(
            'getUsersSuccess','getUsersFailed'
        );
    

    getUsers(userId) 
        $.ajax( url: '/api/users/'+userId )
        .done((data) => 
            this.getUsersSuccess(data);
        )
        .fail((jqXhr) => 
            this.getUsersFailed(jqXhr);
        );
    

export default alt.createActions(UserActions);