Question

我从某个其他组件调度某个操作，并且商店正在使用svgArr属性进行更新，但是通过以下无状态组件connect'ed到商店，它是一个＆＃39;在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

您似乎要导出Layer而不是Layer组件的连接版本。

如果你看一下redux文档：https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-dispatch-and-todos

应该是

＆＃13;

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

＆＃13;

Answer 2

这是对代码的重写

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 3

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

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

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

Answer 4

此外，您还可以将多个状态对象与功能组件一起传递。

import {connect} from 'react-redux';

const PartialReview = ({auth, productreview}) => (
    <div className="row">
        <h2>{auth.uInfo._ubase}<h2>
        <p>{productreview.review_description}
    </div>
);

  const mapStateToProps = (state) => {
    return {auth: state.auth,productreview: state.productreview}
    };
  export default connect(mapStateToProps)(PartialReview)

Answer 5

这里使用 redux 和 react native 中的功能组件

import { useSelector } from 'react-redux';

const 变量 = useSelector(state => state.user.variable)

连接不与Redux-react中的StateLess组件一起使用

5 个答案: