It's a simple concept. Redux creates a ubiquitous state object (a store) from the actions in the reducers. Like a React component, this state doesn't have to be explicitly coded anywhere, but it helps developers to see a default state object in the reducer file to visualise what is happening. You import the reducer in the component to access the file. Then mapStateToProps selects only the key/value pairs in the store that its component needs. Think of it like Redux creating a global version of a React component's

this.state = ({ 
cats = [], 
dogs = []
})

不可能通过使用mapStateToProps()来改变状态的结构。您所做的只是选择组件需要的存储键/值对，并将值(从存储中的键/值列表中)传递给组件中的道具(本地键)。在列表中，每次只执行一个值。在此过程中不会发生结构更改。

附注:商店是本地的。reducer通常也将状态传递给数据库，与Action creator一起混合，但首先要理解这个简单的概念。

P.P.S.将每个减速器分离到单独的文件中，并且只导入组件需要的减速器，这是一个很好的做法。

It's a simple concept. Redux creates a ubiquitous state object (a store) from the actions in the reducers. Like a React component, this state doesn't have to be explicitly coded anywhere, but it helps developers to see a default state object in the reducer file to visualise what is happening. You import the reducer in the component to access the file. Then mapStateToProps selects only the key/value pairs in the store that its component needs. Think of it like Redux creating a global version of a React component's

this.state = ({ 
cats = [], 
dogs = []
})

不可能通过使用mapStateToProps()来改变状态的结构。您所做的只是选择组件需要的存储键/值对，并将值(从存储中的键/值列表中)传递给组件中的道具(本地键)。在列表中，每次只执行一个值。在此过程中不会发生结构更改。

附注:商店是本地的。reducer通常也将状态传递给数据库，与Action creator一起混合，但首先要理解这个简单的概念。

P.P.S.将每个减速器分离到单独的文件中，并且只导入组件需要的减速器，这是一个很好的做法。

下面是描述mapStateToProps行为的大纲/样板:

(这是Redux容器功能的极大简化实现。)

class MyComponentContainer extends Component {
  mapStateToProps(state) {
    // this function is specific to this particular container
    return state.foo.bar;
  }

  render() {
    // This is how you get the current state from Redux,
    // and would be identical, no mater what mapStateToProps does
    const { state } = this.context.store.getState();

    const props = this.mapStateToProps(state);

    return <MyComponent {...this.props} {...props} />;
  }
}

和明年

function buildReduxContainer(ChildComponentClass, mapStateToProps) {
  return class Container extends Component {
    render() {
      const { state } = this.context.store.getState();

      const props = mapStateToProps(state);

      return <ChildComponentClass {...this.props} {...props} />;
    }
  }
}

import React from 'react';
import {connect} from 'react-redux';
import Userlist from './Userlist';

class Userdetails extends React.Component{

render(){
    return(
        <div>
            <p>Name : <span>{this.props.user.name}</span></p>
            <p>ID : <span>{this.props.user.id}</span></p>
            <p>Working : <span>{this.props.user.Working}</span></p>
            <p>Age : <span>{this.props.user.age}</span></p>
        </div>
    );
 }

}

 function mapStateToProps(state){  
  return {
    user:state.activeUser  
}

}

  export default connect(mapStateToProps, null)(Userdetails);

问:这样可以吗? 是的

问:这是预期的吗? 是的，这是预期的(如果您正在使用react-redux)。

问:这是反模式吗? 答:不，这不是反模式。

这被称为“连接”组件或“使其智能”。这是设计出来的。

它允许您在额外的时间内将组件与状态解耦，从而增加代码的模块化。它还允许您将组件状态简化为应用程序状态的子集，这实际上有助于您遵守Redux模式。

可以这样考虑:存储应该包含应用程序的整个状态。 对于大型应用程序，这可能包含数十个嵌套在多层深处的属性。 你不希望每次通话都带着这些东西(很贵)。

如果没有mapStateToProps或类似的东西，您可能会倾向于以另一种方式分割状态以提高性能/简化。

是的，你可以做到。您甚至还可以处理状态并返回对象。

function mapStateToProps(state){  
  let completed = someFunction (state);
   return {
     completed : completed,  
   }
}
 

如果您想将与状态相关的逻辑从呈现函数转移到它的外部，这将非常有用。