web-dev-qa-db-fra.com

Connect ne fonctionne pas avec le composant StateLess dans Redux-react

J'envoie une action à partir d'un autre composant et le magasin est mis à jour avec la propriété svgArr, mais bien que le composant sans état suivant connect'ed au magasin, il n'est pas mis à jour lorsque le magasin change pour svgArr.

Est-ce ainsi qu'il suppose de se comporter comme un composant sans état? Ou est-ce que je fais quelque chose de mal?

const Layer = (props) => {
  console.log(props.svgArr);
  return (<div style = {
    {
      width: props.canvasWidth,
      height: props.canvasWidth
    }
    }
    className = {
    styles.imgLayer
    } > hi < /div>);
};

connect((state) => {
  return {
    svgArr: state.svgArr
  };
}, Layer
);

export default Layer;
javascriptreactjsfunctional-programmingreduxredux-thunk
14
sapy

Voici une réécriture de votre code

import {connect} from 'react-redux';

// this should probably not be a free variable
const styles = {imgLayer: '???'};

const _Layer = ({canvasWidth}) => (
  <div className={styles.imgLayer} 
       style={{
         width: canvasWidth,
         height: canvasWidth
       }}
       children="hi" />
);

const Layer = connect(
  state => ({
    svgArr: state.svgArr
  })
)(_Layer);

export default Layer;
12
user633183

Vous semblez exporter la couche au lieu de la version connectée du composant Layer.

Si vous regardez la documentation de redux: https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-dispatch-and-todos

Cela devrait être quelque chose comme

function mapStateToProps(state) {
  return {svgArr: state.svgArr}
}
export default connect(mapSTateToProps)(Layer)
18
sunnyto

Si vous souhaitez connecter la fonction sans état, vous devez l'envelopper dans une autre const:

const Layer = (props) => {
  return (
   <div > 
   </div>
 );
};

export const ConnectedLayer = connect(mapStateToProps)(Layer);
2
Jackkobec