Redux中不使用StateLess组件的连接

Question

我正在从其他组件中分配一个操作，而且商店正在使用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;

Answer 1

以下是您的代码的重写

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;

Answer 2

您似乎是在导出层，而不是层组件的连接版本。

如果您查看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)

​

Answer 3

如果要连接无状态函数，应该将其包装到另一个const中：

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

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