将动作从Redux Connect添加到组件属性的过程可以通过以下步骤完成:
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { Action } from 'redux';
// 导入你的动作文件
import { yourAction } from './actions';
interface ComponentProps {
// 声明组件的属性
yourProp: string;
// 声明所需的动作
yourAction: () => void;
}
class YourComponent extends React.Component<ComponentProps> {
// 组件的实现代码
render() {
// 使用组件的属性和动作
const { yourProp, yourAction } = this.props;
// 渲染组件的内容
return (
<div>
<p>{yourProp}</p>
<button onClick={yourAction}>执行动作</button>
</div>
);
}
}
// 使用connect函数将组件连接到Redux store,并将动作添加到组件的属性中
export default connect(
// 将Redux store的状态映射到组件的属性
(state: RootState) => ({
yourProp: state.yourReducer.yourProp,
}),
// 将动作绑定到组件的属性
(dispatch: Dispatch<Action>) =>
bindActionCreators(
{
yourAction,
},
dispatch
)
)(YourComponent);
在上述代码中,我们使用了connect函数将组件连接到Redux store。connect函数接受两个参数:mapStateToProps和mapDispatchToProps。mapStateToProps函数将Redux store的状态映射到组件的属性,而mapDispatchToProps函数将动作绑定到组件的属性。
注意:上述代码中的"yourReducer"和"RootState"是示例中的占位符,请根据你的实际情况替换为相应的reducer名称和根状态类型。
这样,你就成功将动作从Redux Connect添加到组件属性中了。在组件中,你可以通过访问this.props来使用这些属性和动作。
领取专属 10元无门槛券
手把手带您无忧上云