関数内のreduxストアへのアクセス

Question

.jsファイルから関数を公開することをお勧めします。その関数内では、ストア内の変数にアクセスすることをお勧めします。

コードのスニペット： -

import { connect } from 'react-redux'; 

function log(logMessage) { 
    const {environment} = this.props; 
    console.debug('environment' + environment + logMessage); 
    .... 
} 

function mapStateToProps(state) { 
    return { 
     environment : state.authReducer.environment 
    }; 
} 

export default function connect(mapStateToProps)(log); 

私は、connectを通じてクラスを添付して、多くの部品を、持っている私はconnect()を通じて機能を付けることができますか？

Answer 1

編集1

Some_File.js

import store from './redux/store.js'; 

function aFunction(){ 
    var newState =store.getState(); 
    console.log('state changed'); 
} 

store.subscribe(aFunction) 

私はReduxのは、期待してあなたが店やレデューサーを作成していると仮定しています。

~~~~~~~~~~~~~~~

オリジナル回答は

これは、私はあなたがそうしているのか分からないハック、の一種であるを開始します私はあなたがそれをしてはならないと言いたいことはできません。しかし、あなたはこのようにすることができます。いくつかの変更を加えてコードの一部をコピー貼り付けました。

Class XYZ extends React.Component{ 
    componentWillReceiveProps(props){ 
     //in your case this.props.storeCopy is redux state. 
     //this function will be called every time state changes 
    } 

    render(){ 
     return null; 
    } 
} 



function mapStateToProps(state) { 
    return { 
     storeCopy : state 
    }; 
} 

export default function connect(mapStateToProps)(XYZ); 

状態は、このコンポーネントのこのcomponentWillReceivePropsが呼び出されます変更するたびに、ありちょうどprovider内、一番上にどこかに、このコンポーネントを置きます。

Answer 2

ストアにアクセスする適切な場所は、コンテナを介してです。connectは、コンテナをコンポーネントに接続するために使用されます。ランダムな機能を接続することはできません。

reduxのためのlogger middlewareがあります。あなたが見てみることができないかもしれない、それは達成しようとしていることをしています。

ちょうどお店へのミドルウェアとして渡し、それを使用するには：Reduxのアプリをデバッグする

import createLogger from 'redux-logger'; 

const store = createStore(
    reducer, 
    applyMiddleware(logger) 
); 

より適切な方法は、React Dev Toolsを使用することですあなたがChromeを使用している場合、私が使用することをお勧めいたしますReact Dev Tools Extension。ただ、install itとアクションが解雇されて見て、彼らは店にどのような影響を与えるか、あなたの店の全体の状態を見ることができます任意の時点でのミドルウェアそれで

let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension()); 

、としてそれを使用する、とさえすることにより、アプリケーションを巻き戻し実行していない操作。

Answer 3

はい。以下のようにconnectを使って関数をアタッチすることができます。

const mapDispatchToProps = (dispatch) => { 
    return { 
     testFunction: (param1) => dispatch(testFunction(param1)), 
     testFunction1:() => dispatch(testFunction1()) 
    }; 
}; 

export default function connect(mapStateToProps, mapDispatchToProps)(log);