如何使用mapStateToProps在类组件在React?

Question

Login.js in function component

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { login } from '../actions/auth';

const Login = ({ login, isAuthenticated }) => {
return (
<div>
// some code here
</div>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { login })(Login);

我如何在类组件中使用上面的mapStateToProps函数，就像我在功能组件中使用的那样?

Login.js在类组件

import React, {Component} from "react";
class Login extends Component{
constructor(props) {
super(props);
this.state = {
search:'',
}
}
render() {
return(
<div> 
//some code here
</div>
)
}
}
export default Login;

Answer 1

在类组件mapStateToProps的工作原理与功能组件相同，我觉得只有一些语法或调用方法不同。

mapStateToProps函数是使用function关键字(function mapState(state){})编写还是作为箭头函数编写都没有关系(const mapState = (state) =>{}) -两者都是一样的

Class component withmapStateToProps

import React, {Component} from "react";
import { connect } from 'react-redux';
import { login } from '../actions/auth';
class Login extends Component{
constructor(props) {
super(props);
this.state = {
search:'',
}
}
render() {
const { isAuthenticated } = this.props;
return(
<div> 
//some code here
</div>
)
}
}
function mapStateToProps(state) {
const { isAuthenticated } = state.auth.isAuthenticated
return { isAuthenticated }
}
export default connect(mapStateToProps)(Login)

你可以看到，只有一个主要的区别是:在类组件我们从this.props中读取值isAuthenticated，而在功能组件中我们正在获取作为参数的值。

有关mapStateToProps的更多信息，请阅读。https://react-redux.js.org/using-react-redux/connect-mapstate