グローバルReduxストアにまだアクセスできるクラスをReactで作成することはできますか？

Question

私は通常と同じように使用できるように、このような

class Person { 
    constructor(fname, lname) { 
    this.fname = fname; 
    this.lname = lname; 
    } 
} 

のようなクラスを作成したいと思います：

let temp = new Person('John', 'Doe'); 

が、私は、そのクラスへのアクセスにグローバルストアを持つことができる方法はありますか？私はそれができない場合があります考え出し

constructor(props, context) { 
    super(props, context); 
} 

class Person { 
    constructor() { 
    this.fname = this.props.fname; 
    this.lname = this.props.lname; 
    } 
} 

function mapStateToProps(state) { 
    return { 
    fname: state.person.fname, 
    lname: state.person.lname 
    }; 
} 
export default connect(mapStateToProps)(Person); 

が、リアクトコンポーネントのコンストラクタがそうなので

がために：

私のような何かをするのが大好きですか？しかし、私はそれが多くを助けるようにとにかく尋ねたかった。ありがとう

Answer 1

通常のクラスは反応コンポーネントと同じタイプのライフサイクルを経ないため、ここではconnectは意味をなさないでしょう。

また、同じ状態を複数の場所に保存しないようにしたいとします。還元の全ポイントは、州を統合し、あなたのためにそれを管理することです。だから私はあなたの代わりにこれを行うには

、代わりにReduxの状態とthis.fname間の同期をmanangeしようとしているのlnamefname電流を知っている必要がありますいずれかの方法でthis.lname

を store.getState()を呼び出して、あなたは現在の storeを公開しなければならないことをお勧めしますあなたがすでにやっているかもしれない何らかの種類の importを通して。あなたはまだこれをやっていない場合

、私はあなたが単に

import { store } from '../store'; 

function mapStateToProps(state) { 
    return { 
    fname: state.person.fname, 
    lname: state.person.lname 
    }; 
} 

export default class Person() { 
    constructor(){ 
    } 

    toString() { 
     // example method 
     let { fname, lname } = mapStateToProps(store.getState()); 
     return `${fname} ${lname}`; 
    } 
} 

Answer 2

いいえ、connectは、そのようなプレーンなクラスでは機能しません。これは、小道具や文脈を介して店にアクセスし、Reactコンポーネントを受け入れ/使用するため、Reactコンポーネントでのみ機能します。

インポートを使用してストアオブジェクトに直接アクセスする必要があります。 はであり、店舗登録プロセスの管理に役立つ数多くのユーティリティがあります。おそらくその1つが役立つかもしれません。私のリストはRedux addons catalog: Store - Store Change Subscriptionsです。

究極的には、実際にはすべてstore.subscribe()と呼ばれ、サブスクリプションコールバックでstore.getState()で処理します。