Redux连接函数的混淆
我刚刚接手了用React和Redux编写的遗留代码。我对connect函数的用法非常困惑，如下所示：
export default connect(state => state)(Root); 我搜索了所有的代码，但是找不到状态变量。App.js如下：
class Root extends Component {
constructor(props) {
super(props);
this.field = new Field(this);
this.state = {
userName: 'Tom'
}
}
componentDidMount() {
const { dispatch } = this.props;
dispatch(actions.getUserName({id:1001},(x)=>{console.log(x)}))
}
render() {
const { userName } = this.state;
const { userData } = this.props;
return (
<div>hello {userData} </div>
);
}
}
export default connect(state => state)(Root);Actions.js如下：
export const GET_USER_NAME = ns('GET_USER_NAME');
export function getUserName(arg, callback) {
return (dispatch) => {
axiosClient.fetch({
api: '/getUserNameById',
data: arg
}).then((user) => {
callback(user.name)
dispatch({
type: GET_USER_NAME,
data: user.name
});
})
};
}reducer.js如下：
import * as actions from '../actions/index'
const initialState = {
};
const defaultAction = {
type: 'doNothing',
};
export default function index(state = initialState, action = defaultAction) {
switch (action.type) {
case actions.GET_USER_NAME:
return { ...state, userData: action.data };
default:
return state;
}
}Store.js as：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
const middlewares = [thunkMiddleware];
const createStoreWithMdware = applyMiddleware(...middlewares)(createStore);
export default createStoreWithMdware;回答 3
Stack Overflow用户
发布于 2019-10-16 17:52:22
来自connect的签名是
const connect = (mapStateToProps, mapDispatchToProps)(Component)所以这个奇怪的罪孽
connect(state => state)(Root)等于
const mapStateToProps = state => state
connect(mapStateToProps, undefined)(Root)state是由mapStateToProps的redux提供的。是商店状态的快照。state => state的意思是：“将我的所有状态序列化为Root props”。
通常我们使用state将它的一部分序列化到组件中，如下所示
const mapStateToProps = state => ({ foo : state.foo })Stack Overflow用户
发布于 2019-10-16 18:02:05
connect是一个高阶组件，它接受两个参数mapStateToProps和mapDispatchToProps，其中mapStateToProps使redux存储值可用作组件的支持，而mapDispatchToProps使redux操作可用作组件的支持。
在这里，connect(state => state)意味着所有的redux存储键都映射到组件的道具上。那么，假设您的redux商店是这样的：
{
home: { count: 1 },
login: { isLoggedIn: true }
}然后,
在执行connect(state => state)时，组件道具将是，
{
...originalProps,
home: { count: 1 },
login: { isLoggedIn: true }
}如果只想在组件中使用isLoggedIn，则只能通过以下方法将其映射到支持：
connect( state =>({
isLoggedIn: state.login.isLoggedIn
}))Stack Overflow用户
发布于 2019-10-16 18:10:01
Redux connect函数允许您将组件连接到应用程序级的Redux商店。一旦连接，组件就可以作为道具接收部分Redux存储当前状态(或者整个状态，就像在您的例子中那样)。
在这一行
export default connect(state => state)(Root);有两件事发生了。
first ：连接的第一个调用接受一个函数作为第一个参数。这个函数通常被称为mapStateToProps，允许您定义Redux存储的哪些属性需要提供给组件，以及在哪个名称下可用。在您的示例中，您的函数将返回整个存储区(原样)，因此您的组件将在其道具中包含存储的所有属性。
第二个：第二个调用，通常称为自组织(高阶组件)，它是返回一个React组件的函数。它的参数是要连接的组件。此组件将被包装，并将接收第一个函数调用中指定的道具。
const addSomePropsFromReduxStoreTo = connect(state => state)
const connectedRoot = addSomePropsFromReduxStoreTo(Root)Redux还将添加一个特殊的额外支柱dispatch，它允许您分派一个操作，并通过它更新Redux状态。这就是为什么在根的componentDidMount方法中可以这样做的原因：
componentDidMount() {
const { dispatch } = this.props;
dispatch(actions.getUserName({id:1001},(x)=>{console.log(x)}))
}如果您想知道状态在哪里，那么它是在您的Store.js文件中定义的(带有函数createStore)。在应用程序的根组件(通常是App.js)中，您应该有一个特殊的组件，名为Provider，它将商店作为支柱。感谢应用程序根目录下的这个特殊组件，每个子代组件都能够连接自己并访问商店。
https://stackoverflow.com/questions/58419031
复制相似问题
腾讯云开发者
