问:这样可以吗? 是的

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

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

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

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

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

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

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

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

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

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);

This react & redux example is based off Mohamed Mellouki's example. But validates using prettify and linting rules. Note that we define our props and dispatch methods using PropTypes so that our compiler doesn't scream at us. This example also included some lines of code that had been missing in Mohamed's example. To use connect you will need to import it from react-redux. This example also binds the method filterItems this will prevent scope problems in the component. This source code has been auto formatted using JavaScript Prettify.

import React, { Component } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class ItemsContainer extends Component {
  constructor(props) {
    super(props);
    const { items, filters } = props;
    this.state = {
      items,
      filteredItems: filterItems(items, filters),
    };
    this.filterItems = this.filterItems.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { itmes } = this.state;
    const { filters } = nextProps;
    this.setState({ filteredItems: filterItems(items, filters) });
  }

  filterItems = (items, filters) => {
    /* return filtered list */
  };

  render() {
    return <View>/*display the filtered items */</View>;
  }
}

/*
define dispatch methods in propTypes so that they are validated.
*/
ItemsContainer.propTypes = {
  items: PropTypes.array.isRequired,
  filters: PropTypes.array.isRequired,
  onMyAction: PropTypes.func.isRequired,
};

/*
map state to props
*/
const mapStateToProps = state => ({
  items: state.App.Items.List,
  filters: state.App.Items.Filters,
});

/*
connect dispatch to props so that you can call the methods from the active props scope.
The defined method `onMyAction` can be called in the scope of the componets props.
*/
const mapDispatchToProps = dispatch => ({
  onMyAction: value => {
    dispatch(() => console.log(`${value}`));
  },
});

/* clean way of setting up the connect. */
export default connect(mapStateToProps, mapDispatchToProps)(ItemsContainer);

这个示例代码是一个很好的模板，可以作为组件的起点。

问:这样可以吗? 是的

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

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

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

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

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

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

React-Redux连接用于更新每个操作的存储。

import { connect } from 'react-redux';

const AppContainer = connect(  
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppContainer;

这篇博客里解释得非常简单明了。

你可以克隆github项目或复制粘贴从博客的代码来理解Redux连接。