# Создание

Я предлагаю по шагам создать одностраничное приложение, с минимумом функций, которое после логина в VK и подтверждения прав доступа к фото, будет выдавать топ ваших "залайканных" фото в порядке убывания. Схематично, приложение можно представить следующим образом:

![app preview](/files/-LvLnQaJ7iEGS2XB6Ths)

Прежде чем описывать структуру, давайте в общих чертах взглянем на Redux.

Redux - приложение это:

* состояние (store) приложения в одном месте;
* однонаправленный поток данных: случился action -> редьюсер по команде "фас" отработал и вернул новое состояние -> компонент(ы) обновились;

Redux вдохновлен [Flux](https://facebook.github.io/flux/docs/overview.html#content) методологией и языком программирования [Elm](http://elm-lang.org/)

Под капотом, Redux использует старую фичу реакта - **context**, которая обрела вторую жизнь в версии реакта 16.3 - "[New context API](https://reactjs.org/docs/context.html)".

Есть старый [context](https://reactjs.org/docs/legacy-context.html), который использует Redux, и есть новое Context API, не путайте.

## Файлы и папки:

Изначально наше приложение в файловом менеджере должно выглядеть так (создайте недостающие директории в src):

```
+-- src
|   +-- actions
|   +-- components
|   +-- containers
|   +-- reducers
|   +-- utils
+-- файлы-от-create-react-app
+-- ...
```

Для обучения мы будем использовать очень распространенный подход организации файлов: деление на контейнеры и компоненты + экшены и редьюсеры в отдельных директориях.

Есть и другие подходы, мне нравится [композиция по фичам/страницам](https://jaysoo.ca/2016/02/28/organizing-redux-application/) (EN).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-frontend.gitbook.io/redux-course-ru-v2/sozdanie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.