2016-03-16 13 views
8

反応成分を使わずに店にアクセスしたい(ディスパッチして観察する)。私は結果を出さずに2時間を探していました。反応なしで還元する

これが該当します。私は、Appルートにストアを作成しました:

import { Provider } from 'react-redux' 
import createStore from './state/store'; 

let store = createStore(); 

ReactDOM.render( 
    <Provider store={store}> 
    <App> 
    </Provider>, 
    document.getElementById('root') 
); 

私はアクションを追加したり、コンポーネントの状態変化に耳を傾ける必要がある場合react-reduxから提供connect機能を使用して幸せなんだけど、私は設定したいときコンポーネントの外側のいくつかのロジック(主にディスパッチ)が止まってしまいます。

要するに、私は1つのフィールドを検証したいと思います。 validation.jsファイルを作成して、ストアからの変更をリッスンし、検証ロジックを実行してから、最終的なエラーを伴うアクションをディスパッチします。

店舗に関する限り、グローバルではなく、リアクタントコンポーネントを使用していません。店舗に変更を聞き取り、行動を促す方法はどれですか?

ありがとうございます。

答えて

5

を注入することによって、それを行うことができます。

export const dispatch = store.dispatch

その後、あなたのコードのどこからでもdispatchを呼び出すことができます(私はかなりイベントハンドラからやっていますが)。

あなたはフロー制御を管理するためにRedux-Sagaを使用する場合、それはそのput APIに派遣ラップするので、あなたはまれにしか、直接ユーザ入力のためのイベントハンドラとは別に、dispatchを使用する必要がありません。

2

私はあなたが店舗からの変更を直接聞いてはいけないと思っていますが、アクションをディスパッチするためにはそれを必要とします。あなたはこの種のロジックを呼び出すための自然な場所は、磁界の変化を派遣actionからだろうredux

変化を聴く

export function updateSomeField(value, field) { 
    fieldValidator.validate() 
    return { type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value } 
} 

fieldValidatorstore.getState()と彼のロジックを実行するために彼が必要な状態を取得するために、ストアへの参照を保持する、または(非同期アクションの助けを借りて)をパラメータとして行動からそのデータを取得することができます:

export function updateSomeField(value, field) { 
    return (dispatch, getState) => { 
     fieldValidator.validate(getState.myScreen.fields) 
     dispatch({ type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value }) 
    } 
} 

はできるだけ早く店舗

を取得あなたはそれを作成するように、あなたはそれを必要とする人にそれを提供することができます。 あなたはどちらかが(私の店を作成した後に)シングルトン

let store = createStore(); 
FieldValidator.setInstance(new FieldValidator(store)); 

// FieldValidator.js 
class FieldValidator { 
    ... 
    static _instance = null; 

    static getInstance() { 
     return FieldValidator._instance; 
    } 

    static setInstance(fieldValidator) { 
     FieldValidator._instance = fieldValidator; 
    } 
    ... 
} 

を初期化するか、これは私が何をすべきかですメンバー

let store = createStore(); 
fieldValidator.store = store; 
関連する問題