2017-01-02 55 views
0

我在下面的方式定義一個類的內部終極版動作的創造者:我們可以在類中定義的redux Action Creators上使用bindActionCreators()嗎?

export class ActionCreator { 

    login() { 
     return { type: 'LOGIN_STATUS' }; 
    } 

    fbLoginStatusOK(user) { 
     return { type: 'LOGIN_OK', user }; 
    } 
} 

然後,反應的組分中我使用他們這樣的:

class Login extends React.Component { 

    login(e) { 
     e.preventDefault(); 
     a = new ActionCreator(); // Simplified 
     dispatch(a.login()); 
    }; 

    render() { 
     return (
      <div> 
       <h1>Login</h1> 
       <p> 
        <a href="#" onClick={this.login}>Login</a> 
       </p> 
      </div> 
     ); 
    } 
} 

如何使用bindActionCreators上的「 ActionCreator'class or its object?

(使每一個動作創建者包裹成一個調度呼叫,這樣他們可以直接調用)

回答

2

bindActionCreators使用Object.keys迭代的對象的所有功能性,並用dispatch()呼叫包裹它們。 就你而言,即使你使用類似bindActionCreators(new ActionCreator())之類的東西,它也不會起作用,因爲Babel會將方法轉換爲不可枚舉的屬性。

一個可能的解決方案可能會宣佈在構造函數中的所有方法:

class ActionCreator { 
    constructor() { 
     this.login =() => ({ type: 'LOGIN_STATUS' }); 
    } 
} 

但會錯過了這一點。

另一種可能性是創建自己的實用程序,它將類似於bindActionCreators,但將使用Object.getOwnPropertyNames而不是Object.keys。但是,您應該謹慎從事,並確保您只包裝所需的方法(例如,忽略constructor)。

我也想知道你的動機是什麼?使用類而不是普通對象的開銷不是一點點嗎?

+0

由於React是基於類的,我只是試圖在Redux部分儘可能地放置類封裝。 – Chebyr

+1

我不會稱React爲「基於類」,而只是「模塊化」。另外,不要忘記,Redux不一定與React配合使用。在你的例子中,我看不到實際需要聲明一個類並實例化。從技術上講,它也會導致更大的代碼庫。 –

+0

那麼我們可以去ActionCreator類中的靜態方法刪除,然後使用bindActionCreators(ActionCreator,dispatch)? – Chebyr

相關問題