Почему не видит state?

Question

[Pogran]

У меня есть такой код

const mapDispatchToProps = (dispatch) => {
	return {
		fetchEntities: (limit, offset) => {
			dispatch(fetchEntities(limit, offset)).then(response => {
				this.setState({data: response.data, pageNum: Math.ceil(response.data.length / 2)});
			}) ;
		},
		requestDeleteEntity: (id) => {
			dispatch(requestDeleteEntity(id));
		}
	}
};

и мне пишет что this - undefined . Как здесь сделать связывание?

Answer 1

[Максим]

Давайте по порядку:
1) this не видит, потому что у стрелочной функции нет своего контекста (пример, учебник)

2) прокидывать this в mapDispatchToProps не нужно. Если вы хотите изменить state опираясь на новые данные, то это нужно делать в componentWillReceiveProps методе.

3) чтобы пришли новые props, вам нужно их обработать в редьюсере, а для этого вам нужно вызывать в mapDispatchToProps ваш экшен-крейтор. То есть mapDispatchToProps будет выглядеть так (обратите внимание на круглые скобки после => , это сделано, чтобы не писать rerturn {...}):

const mapDispatchToProps = (dispatch) => ({
  fetchEntities: (limit, offset) => dispatch(fetchEntities(limit, offset))
})

для этого, конечно же импортировать из actions ваш fetchEntities. В котором у вас promise версия, в которой будете обрабатывать пришедшие данные. Теория по этому поводу здесь, либо можете посмотреть теорию+пример на русском языке здесь.

3.5) В mapStateToProps у вас должно быть соответствующее свойство, в которое вы будете из reducer'a прокидывать ваши новые props, и из-за этого сработает componentWillReceiveProps внутри которого вы сможете вызывать this.setState.

Comments

[Mikhail Osher]

По поводу 3.5 - это излишнее действие. Данные надо забирать из props, ибо дублирование данных из props в state - неправильно.

[Mikhail Osher]

По поводу 1 - у стрелочной функции есть контекст. Дело в том, что в es5 - глобальный this === window, а в es6 - глобальный this === undefined.

[Максим]

Mikhail Osher: как они окажутся в props, если их не будет в mapStateToProps? сигнатура функции connect - (mapStateToProps, mapDispatchToProps)(Component). Про this все хорошо расписано в учебнике Кантора, на который ссылка есть.

[Максим]

Mikhail Osher: а по поводу state - если человеку зачем то нужно использовать state на основе данных из props - то пусть использует, я писал только о том, что это возможно и как это сделать.

[Максим]

Mikhail Osher: Если прикинуть, что мы "провидцы", то я бы тоже не использовал state в данном конкретном случае, так как все можно с легкостью сделать без этого ( если говорить только о том, что видим в вопросе: {data: response.data, pageNum: Math.ceil(response.data.length / 2)} )

[Mikhail Osher]

Максим: "... ваши новые props, и из-за этого сработает componentWillReceiveProps внутри которого вы сможете вызывать this.setState" - исходя из этих слов, данные из props попадают в state компонента. Это недопустимо.

[Максим]

Mikhail Osher: почему? Если я хочу вызвать изменения в state компонента, на основе данных из props - то почему это недопустимо? Даже двойного рендера не будет, а в документации по react'у как раз изменяют state на основе новых props. https://facebook.github.io/react/docs/component-sp...

[Mikhail Osher]

Максим: Прошу прощения, я некорретно выразился. Я считаю, что какие-то данные (entity, или коллекция entities) должны приходить в готовом виде из контейнера в презентер, ибо презентер не имеет права заниматься бизнес-логикой.

[Максим]

Mikhail Osher: в этом утверждении согласен с вами.

Answer 2

[Mikhail Osher]

Так нельзя писать.
mapDispatchToProps вызывает что-то вроде dispatch({type: 'FETCH_ENTITIES_REQUEST', ... }).
Затем по завершению запросов надо вызвать dispatch({ type: 'FETCH_ENTITIES_SUCCESS', ... }), который обработается редьюсером, и Ваша функция mapStateToProps подхватит изменения.

Пример реализации. (смотрите middleware/api.js)

И еще совет.
Ввиду того, что mapStateToProps вызывается при любых изменениях store, в целях производительности есть смысл использовать библиотеку reselect, чтобы не вызывать холостой render в компонентах, чьи props не изменились по факту.