我试图理解react-redux的连接方法,以及它作为参数的函数。特别是mapStateToProps()。

我理解它的方式,mapStateToProps的返回值将是一个从状态派生的对象(因为它存在于存储中),它的键将作为道具传递给您的目标组件(组件连接被应用到)。

这意味着目标组件使用的状态可能与存储在存储库中的状态具有完全不同的结构。

问:这样可以吗? 问:这是预期的吗? 问:这是反模式吗?


当前回答

你第一部分答对了:

mapStateToProps将Store状态作为参数/参数(由react-redux::connect提供),用于将组件与Store状态的某些部分链接起来。

通过链接,我的意思是mapStateToProps返回的对象将在构造时作为props提供,任何后续的更改将通过componentWillReceiveProps可用。

如果你知道观察者的设计模式,它就是那样或它的一个小变化。

举个例子可以让你更清楚:

import React, {
    Component,
} from 'react-native';

class ItemsContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: props.items, //provided by connect@mapStateToProps
            filteredItems: this.filterItems(props.items, props.filters),
        };
    }

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

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

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

module.exports = connect(
    //mapStateToProps,
    (state) => ({
        items: state.App.Items.List,
        filters: state.App.Items.Filters,
        //the State.App & state.App.Items.List/Filters are reducers used as an example.
    })
    // mapDispatchToProps,  that's another subject
)(ItemsContainer);

There can be another react component called itemsFilters that handle the display and persisting the filter state into Redux Store state, the Demo component is "listening" or "subscribed" to Redux Store state filters so whenever filters store state changes (with the help of filtersComponent) react-redux detect that there was a change and notify or "publish" all the listening/subscribed components by sending the changes to their componentWillReceiveProps which in this example will trigger a refilter of the items and refresh the display due to the fact that react state has changed.

如果这个例子令人困惑或不够清楚,请告诉我,以便提供更好的解释。

至于for:这意味着目标组件使用的状态可能与存储在存储库中的状态具有完全不同的结构。

我没有得到这个问题,但只知道反应状态(this.setState)与Redux Store状态完全不同!

react状态用于处理react组件的重绘和行为。反应状态只包含在组件中。

Redux Store状态是Redux reducers状态的组合,每个状态负责管理一小部分应用程序逻辑。任何组件都可以在react-redux::connect@mapStateToProps的帮助下访问这些reducers属性!这使得Redux商店状态可访问的应用程序范围内,而组件状态是专属于自己。

其他回答

我想对你提到的发言进行调整,即:

这意味着您的目标组件所使用的状态可以 与存储时的状态有很大不同的结构 你的商店

可以说,目标组件使用的状态有一小部分状态存储在redux存储区中。换句话说,组件使用的状态是redux存储区状态的子集。

就connect()方法的理解而言,它相当简单!Connect()方法可以向组件添加新道具,甚至覆盖现有道具。通过这个connect方法,我们也可以访问由Provider抛出给我们的redux存储的状态。两者的结合对您有利,您可以将redux存储的状态添加到组件的道具中。

以上是一些理论,我建议你看一遍这个视频来更好地理解语法。

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

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

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

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

下面是描述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} />;
    }
  }
}

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

import { connect } from 'react-redux';

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

export default AppContainer;

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

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