Reactjs 使用带有React钩子的redux连接

这不是关于react redux钩子的问题，比如

useSelector

或

useDispatch

。我很想知道老式的react redux

connect（）

如何使用功能组件，以及在本例中何时需要使用react钩子，如

useffect

假设我有一个功能组件，如果存在

someReduxData

，它会以绿色呈现“Hello world”，否则它会以红色呈现

const RandomComponent = ({ someReduxData }) => {
  const style = {
    color: someReduxData ? "green" : "red";
  }; 

  return (
    <div style={style}>Hello world</div>
  );
}

const mapStateToProps = (state) => {
  return {
    someReduxData: state.someReduxData;
  };
};

export default connect(mapStateToProps)(RandomComponent);

constrandomComponent=（{someReduxData}）=>{
常量样式={
颜色：someReduxData？“绿色”：“红色”；
}; 
返回(
你好，世界
);
}
常量mapStateToProps=（状态）=>{
返回{
someReduxData:state.someReduxData；
};
};
导出默认连接（MapStateTops）（随机组件）；

---

假设组件第一次装载到DOM时，

someReduxData

为空。然后它改变状态，使其不再为空。这将强制重新渲染

RandomComponent

，使其以绿色渲染吗？如果没有，那么我假设我需要使用

useffect（）

？

侦听

someReduxData

上的更改，它将强制重新呈现随机组件。无论类别与功能组件如何，connect的工作原理都是相同的

下面是一个使用函数组件的示例：在将App div变为绿色的操作分派之前，有2秒的setTimeout

还有一个相同组件使用钩子而不是连接的示例

connect和HOOK之间的主要区别在于connect本质上充当组件的角色。这可以通过布尔标志来关闭，但您可能永远不必这样做：

const initialstate={
someReduxData:null，
};
const reducer=（state=initialstate，action）=>{
开关（动作类型）{
案件‘行动’：
返回{
someReduxData:action.data，
};
违约：
返回初始状态；
}
};
const actionCreator=（数据）=>{
返回{
键入：“操作”，
数据，
};
};
const store=Redux.createStore（reducer）；
常量应用=（{someReduxData}）=>{
返回(
一些div将在2秒内变为绿色
);
};
常量mapStateToProps=（状态）=>{
返回{
someReduxData:state.someReduxData，
};
};
const WrappedApp=ReactRedux.connect（mapStateToProps）（应用程序）；
常量AppWithHooks=（）=>{
const someReduxData=ReactRedux.useSelector（state=>state.someReduxData）；
返回(
一些有钩子的潜水艇会在2秒内变成绿色
);
};
ReactDOM.render(
,
document.querySelector（“#root”）
);
setTimeout（（）=>store.dispatch（actionCreator（'green'）），2000
.green{
背景颜色：绿色；
}
它将强制重新渲染随机组件<代码>连接

的工作原理相同，无论类别与功能组件如何。