Я не могу понять, почему компоненты с «connect ()» с учетом состояния в реакции

Question

Мой вопрос такой же, как и заголовок.

Допустим, я написал следующий код.

class TODOList extends Component {  
  render() {
    const {todos, onClick} = this.props;
    return (
      <ul>
            {todos.map(todo =>
                <Todo 
                    key={todo.id}
                    onClick={onClick}
                    {...todo}
                />
             )}
      </ul>
    );
  }
}


const mapStateToProps = (state) => {  
  return {
    todos: state.todos
  }
}


const mapDispatchToProps = (dispatch) => {  
    return {
        onClick(data){
          dispatch(complete(data)) 
        }
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(TODOList); 

Теперь, после последней строки, этот код будет экспортировать компонент TODOList с состоянием в качестве реквизита.Дело не в том, что оно содержит состояние, а только в полученном состоянии и будет иметь их как «реквизиты», как объясняет имя метода «mapStateToProps».

В средней статье (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0), написанной ДэномАбрамов, контейнерный компонент обрабатывает данные как состояние, а презентационное свойство - как реквизит. Разве это не презентационный компонент, который обрабатывает данные как реквизиты? Я застрял в мысли, что правильный контейнер должен быть таким, как показано ниже.

class CommentList extends React.Component {
  this.state = { comments: [] };

  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }
  render() {
    return (
      <ul>
        {this.state.comments.map(c => (
          <li>{c.body}—{c.author}</li>
        ))}
      </ul>
    );
  }
}

Я не уверен, почему response-redux назвал API mapStateToProps, когда я попытался сделать контейнерный компонент с состоянием (без обработки данных по свойству)

Answer 1

mapStateToProps будет вызываться при изменении данных хранилища.Он передаст возвращенный объект как новый реквизит для компонента.Это не повлияет на состояние компонента.Если вы хотите установить новое состояние после того, как компонент получил новые реквизиты, вам нужно использовать другой метод жизненного цикла: static getDerivedStateFromProps (в более ранних версиях реагирует componentWillRecieveProps).Объект, возвращаемый static getDerivedStateFromProps, будет вашим новым состоянием.

https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

connect() подключит ваш компонент к хранилищу избыточности.Без функции соединения (конечно) ваш mapStateToProps не будет работать.

Я не уверен, почему response-redux назвал API 'mapStateToProps'

Мыговорят о состоянии магазина:)

Answer 2

Целью высокого уровня является бесшовная интеграция управления состоянием Redux в приложение React.Redux вращается вокруг магазина, в котором существует все государство.Нет никакого способа напрямую изменить хранилище, кроме как через редукторы, которые получают действия от создателей действия, и для этого нам нужно отправить действие от создателя действия.

Функция connect() напрямую соединяет нашкомпонентов в хранилище Redux, взяв состояние в хранилище Redux и отобразив его в prop.

. В этом сила Redux и почему мы его используем.

Допустим, выСоздайте компонент с именем LaundryList, и вы хотите, чтобы он отображал список белья.После того, как вы подключили Provider в своем «родительском» компоненте, я поместил его в кавычки, потому что технически Provider является компонентом, поэтому он становится родительским.

Затем вы можете импортировать функцию connect()от react-redux, передайте его mapStateToProps, чтобы получить этот список белья из магазина Redux в ваш LaundryList компонент.

Теперь, когда у вас есть список постельного белья внутри компонента LaundryList, выможно начать сосредотачиваться на построении списка элементов из них следующим образом:

class LaundryList extends Component {
  render() {
    console.log(this.props.linens);
    return <div>LaundryList</div>;
  }
}

, который содержит список объектов белья, и для каждого списка белья внутри него мы собираемся вернуть некоторый jsx, которыйбудет представлять это белье в моем списке.

Вернувшись в свой компонент списка белья, я добавлю вспомогательный метод в компонент списка белья, называемый списком рендеринга, например:

class LaundryList extends Component {
  renderList() {

  }

  render() {
    return <div>LaundryList</div>;
  }
}

Итак, эта цельэтого вспомогательного метода состоит в том, чтобы взять список белья, отобразить их и вернуть большой BLOB-объект jsx, например:

class LaundryList extends Component {
  renderList() {
    return this.props.linens.map((linen) => {
       return (

       );
    });
  }

  render() {
    return <div>LaundryList</div>;
  }
}

Answer 3

Прежде всего, эти рекомендации не являются частью библии
Вы должны написать код, который легко обосновать для ВЫ и вашей КОМАНДЫ .

Я думаю, что вы что-то упустили, Контейнер-редуктор отличается от Реактивного Контейнера.
Я имею в виду, connect создаст контейнер для вас, это не значит, что упакованный компонент Контейнер.

По сути, вы можете экспортировать обе версии из одного и того же файла: Контейнер (подключенная версия) и презентационная версия (не подключенная).

Другая вещь, которая обычно сбивает людей с толку, - это имя функции и аргумент mapStateToProps.
Я предпочитаю имя mapStoreToProps, как в

mapredux сохранить для реквизита компонента.

имя state может сбивать с толку, когда мы находимся в контексте react.

Редактировать
Как продолжение вашего комментария:

Я совершенно не знал, что эти два на самом деле разные.Не могли бы вы рассказать мне подробнее

Они отличаются тем, что connect создает для вас «Контейнер».

connect - это компонент высокого порядка, который создает для нас контейнерный компонент со всеми функциями логики + подписки для передачи частей магазина и создателей действий его дочерним элементам в качестве подпорок (mapStateToProps & mapDispatchToProps).

«Нормальный» Контейнер обычно относится к компоненту, который вы пишете от руки, часто он не имеет отношения к тому, как все должно выглядеть, но вместо этого имеет дело с определенной логикойприложение.

Что касается других комментариев, таких как

Соединительный HoC response-redux просто внедряет свойства, которые вы можете запросить, в свой компонент.Он возвращает новый компонент, который обернут вокруг вашего компонента, так что он может обновлять ваш компонент всякий раз, когда изменяется состояние, в котором вы заинтересованы в хранилище приращений

Как я уже упоминал выше, это частично верно.Это не просто внедрение свойств в наш компонент, его подписка на магазин, получение его из Provider (через context) и выполнение всего этого с учетом оптимизации, поэтому нам не придется делать это самостоятельно,

Я не уверен, как mapStateToProps может кого-то запутать.Мы говорим о библиотеке управления состоянием

Я видел некоторых разработчиков, которые неправильно поняли это, потому что react имеет state, а redux имеет store (по крайней мере, так оно и есть)был вызван в большинстве учебных пособий и документации).
это может сбить с толку некоторых людей, которые плохо знакомы с react или redux.

Редактировать 2

Это было немного странно из-за предложения «это не означает, что упакованный компонент является контейнером».Почему упакованный компонент не является контейнером?Разве компонент, созданный методом connect, также не является контейнером?

Я имею в виду, что созданный вами завернутый компонент не обязательно должен быть Контейнером.
Вы можетеподключить компонент «Презентация»:

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a
      href=""
      onClick={e => {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    </a>
  )
}

// ...
export default connect(mapState, mapDispatch)(Link)