Зачем присваивать connect компоненту?

Question

[ffads livd00]

Нашел такой код в примерах, что он значит?
Я понимаю что mapStateToProps, mapDispatchToProps передают данные в TodoList, а зачем его присваивать VisibleTodoList?

ссылка на исходник

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

И еще вопрос, где лучше прописывать connect?
в отдельных файлах и конектить там к копконентам которые используют эти данные (как это сделать?) или прямо в компоненте?
И можно ли в одном файле прописывать несколько конектов, если у них разные данные для передачи в пропсы? по типу

connect(
  null,
  mapDispatchToProps
)(TodoList)
connect(
  mapStateToProps,
  mapDispatchToProps
)(Todo)

Comments

[Вадим]

Зачем присваивать connect компоненту?

connect - функция, возвращающая компонент, подключённый к стору.
Таким образом, когда стор обновляется, он оповещает компонент, которые используют эти данные из стора, что данные обновились и компонент перерисовывается.

[ffads livd00]

Вадим, то есть когда будут изменения в Todo, перерисует и Todo и VisibleTodoList ?

[Вадим]

ffads livd00, Я не вижу всего Вашего кода. Что подключите через connect, то и будет перерисовываться если в стэйте обновились данные, которые этот компонент использует.

Если у Вас иерархия компонентов:
Список
-- Элемент

То список должен быть умным компонентом, который разруливает данные и будет подключен к стору,
а элемент - глупый компонент, который только получает данные через пропсы и что-то отрисовывает.

[ffads livd00]

Вадим, вопрос в том зачем писать

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

если можно

connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

что будет в VisibleTodoList ?
исходник есть в вопросе, better-than-i-was-yesterday.com/redux-document/doc...

[Вадим]

ffads livd00,

что будет в VisibleTodoList ?

Будет компонент TodoList, обёрнутый в так скажем специальный компонент, который подключен к стору. Или, если выражаться проще - будет компонент TodoList, подключённый к стору.

вопрос в том зачем писать

В данном случае, я полагаю, для статьи. Внизу видно как автор экспортирует VisibleTodoList, как любой другой компонент.

А вообще так все(многие) и пишут:

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)