[javascript] React-Redux 및 mapStateToProps () 이해

첫 번째 부분이 맞았습니다.

예 mapStateToProps는 상점 상태를 인수 / 매개 변수 (로 제공 react-redux::connect)로 가지며 구성 요소를 상점 상태의 특정 부분과 링크하는 데 사용됩니다.

연결한다는 것은 mapStateToProps건설 시간에 소품으로 반환되는 물건이 소품으로 제공되며 이후의 모든 변경 사항은를 통해 제공됨을 의미 componentWillReceiveProps합니다.

Observer 디자인 패턴을 알고 있다면 정확히 그 또는 작은 변형입니다.

예를 들어 더 명확하게하는 데 도움이됩니다.

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

itemsFilters디스플레이를 처리하고 필터 상태를 Redux Store 상태로 유지하는 다른 반응 구성 요소가있을 수 있습니다 . Demo 구성 요소는 Redux Store 상태 필터를 “청취”또는 “구독”하여 필터 저장 상태가 변경 될 때마다 ( filtersComponent반응 을 통해 ) 반응합니다 -redux는 변경 사항이 있음을 감지 componentWillReceiveProps하고이 예에서 항목의 재 필터링을 트리거하고 반응 상태가 변경되어 디스플레이를 새로 고치는 변경 사항을 변경 사항으로 전송하여 청취 / 구독 된 모든 구성 요소에 알리거나 “게시”합니다. .

더 나은 설명을 제공하기에 예제가 혼란 스럽거나 명확하지 않은 경우 알려주십시오.

대상 : 대상 구성 요소가 소비 한 상태가 상점에 저장된 상태와 크게 다른 구조를 가질 수 있음을 의미합니다.

나는 질문을 얻지 못했지만 반응 상태 ( this.setState)가 Redux Store 상태와 완전히 다릅니다.

반응 상태는 반응 구성 요소의 다시 그리기 및 동작을 처리하는 데 사용됩니다. 반응 상태는 구성 요소에 독점적으로 포함됩니다.

Redux Store 상태는 Redux 감속기 상태의 조합이며 각각 작은 부분의 앱 논리를 관리합니다. 이러한 감속기 속성은 react-redux::connect@mapStateToProps모든 구성 요소 의 도움으로 액세스 할 수 있습니다 ! 구성 요소 상태가 독점적 인 반면 Redux 스토어 상태 액세스 가능한 앱을 넓게 만듭니다.

답변

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

import { connect } from 'react-redux';

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

export default AppContainer;

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