web-dev-qa-db-fra.com

Accéder aux fonctions internes de redux store

Je préférerais qu'une fonction soit exposée à partir d'un fichier .js; dans cette fonction, je préférerais avoir accès aux variables du magasin.

Extrait du code: -

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);

J'ai de nombreux composants, qui attachent la classe via connect, puis-je attacher des fonctions via connect()?

reactjsreduxreact-redux
14
raaone7

Modifier 1

Some_File.js

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

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

store.subscribe(aFunction)

Je suppose que vous avez créé un magasin et des réducteurs comme Redux l’attend.

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

La réponse originale commence

C'est une sorte de bidouille, Je ne sais pas ce que vous faites, donc je ne peux pas dire que vous devriez ou ne devriez pas le faire , mais vous pouvez le faire de cette façon J'ai copié-collé une partie de votre code avec quelques modifications.

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);

Placez ce composant quelque part au sommet, peut-être juste à l'intérieur de provider, chaque fois que l'état change, cette componentWillReceiveProps de ce composant sera invoquée.

12
Praveen Prasad

Si vous avez un composant purement fonctionnel, vous pouvez accéder directement à l'état redux comme ceci 

import store './redux/store';

function getStoreDetails() {
   console.log(store.getState());
}
0
karthik vishnu kumar

L'emplacement approprié pour accéder au magasin est via un conteneur. connect est utilisé pour connecter un conteneur à un composant. Vous ne pouvez pas y connecter une fonction aléatoire.

Il existe un middleware logger pour redux que vous ne voudriez peut-être pas regarder, il fait ce que vous essayez d'atteindre.

Pour l'utiliser, il suffit de le transmettre en tant que middleware à votre magasin:

import createLogger from 'redux-logger';

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

Un moyen plus approprié de déboguer une application redux consiste à utiliser React Dev Tools , si vous utilisez Chrome, je vous recommande d’utiliser le fichier React Dev Tools Extension . Juste installez-le et utilisez-le comme middleware

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

Grâce à elle, vous pouvez à tout moment voir l’état de votre magasin, voir les actions déclenchées et leur impact sur le magasin, et même rembobiner votre application en annulant des actions.

0
Marco Scabbiolo

Oui. Vous pouvez attacher des fonctions via connect comme ci-dessous;

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

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