web-dev-qa-db-ja.com

Redux-reactのStateLessコンポーネントでConnectが機能しない

他のコンポーネントからアクションをディスパッチし、ストアはsvgArrプロパティで更新されますが、次のステートレスコンポーネントconnect'edは、ストアに対してsvgArrのストアが変更されても更新されません。

ステートレスコンポーネントであるため、どのように動作するのでしょうか。それとも私は何か間違ったことをしていますか？

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

コードを書き直します

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

接続されたバージョンのレイヤーコンポーネントではなく、レイヤーをエクスポートしているようです。

Reduxのドキュメントを見ると、 https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-dispatch-and-todos

それは次のようなものでなければなりません

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

ステートレス関数を接続する場合は、別のconstにラップする必要があります。

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

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