questions.txt

1) Функциональный компонент, функциональным он называется, потому что по сути компонент в контексте js и react-а это функция. Функция, которая принимает какие-то параметры из вне и возвращает готовый html. Самый простой пример функционального компонента, который прям подверждает слово функциональный - это stateless компонент. То есть компонент, у которого нет своего внутреннего состояния, и все данные он получает из вне. Та же самая кнопка. 
--- 
const Button = props => ( 

{props.title} 
 
) 
--- 
2) Компоненты-контейнеры (умные) и компоненты-презентации (тупые). Это уже как раз из темы redux-a. Умные компоненты, это компоненты, которые подключены к стору редакса. Они могут вызывать actionCreators и через параметры получают данные из стора. Глупые компоненты, это компоненты, которые на прямую не работаю со стором. Они получают данные от компонентов-контейнеров (умных) и по средством коллбеков могут менять стор/вызывать экшены. Таким образом, можно с помощью одного контейнера подключать разные компоненты к стору, не создавая лишних зависимостей. 
Пример: 
Допустим у нас есть авторизация и в сторе находится поле user + есть экшен authUser. 
Сам контейнер будет подключаться к стору, получать данные из стора и передавать дочерним компонентам метод авторизации 
--- 
const UserContainer = props => ( 
React.cloneElement(props.children, { 
user: props.user, 
} 
) 
--- 
Сам контейнер будет подключаться к стору, получать данные из стора и передавать дочерним компонентам метод авторизации 
--- 
class UserContainer extends React.Component { 
render() { 
return ( 

 

) 
} 
}
/** 
* Получаем данные из стора 
*/ 
const mapStateToProps = ({user}) => ({ 
user: user, 
}) 
/** 
* Передаем экшены, как пропсы 
*/ 
const mapDispatchToProps = (dispatch) => ({ 
authUser: (...args) => dispatch( authUser(...args) ), 
})

/** Подключаем контейнер к стору */ 
export default connect( 
mapStateToProps, 
mapDispatchToProps 
)(UserContainer) 
--- 
3) HOC или Higher Order Components. Компоненты высшего порядка, читай тут компонент, как функция. То есть это функция высшего порядка, как частный пример - декоратор. То есть по сути, HOC, можно назвать декораторами для компонентов. Они принимают параметром компонент и возвращают его же, дополняя какими-то св-вами. 
--- 
const styleButton = button => React.cloneElement(button, { 
style: { 
color: '#333', 
background: '#fff' 
} 
})

/** 
* Использование 
*/ 
const styledButton = styleButton(e} title='Кнопка' />) 
--- 
То есть HOC - используется, как функция. Например connect у react-redux - это тоже HOC, который подключает компонент к стору. 
4) Ну тут на самом деле, в скриншоте нет нужды, потому что из ответа и так понятно будет. Я обычно разделяю папку на несколько частей 
Models - это модели (редьюсеры + экшены + стор) 
Components - здесь тупые компоненты, которые могут переиспользоваться сколько угодно раз 
Containers - здесь контейнеры, которые подключатся к стору. 
5) Я так понял суть в том, что данные поступают из одного места ( в redux-e это store ), так же скорее всего неотъемлемой частью является однопоточность данных. То есть данные двигаются в одну сторону, в редуксе цепочка такая (store > action > reducer > store ...и так далее) то есть данные из стора попадают в компонент, который вызыает экшен, который попадет в редьюсер, которые изменяет стор. 
6) Что такое action в терминах и в экосистеме Redux? Экшены, это тоже функции, которые говорят редьюсеру, что именно нужно изменить. Стейт меняется только с помощью вызова экшенов, которые передаются редьсюерам. 
Вот прямо готовая модель:

const defaultState = { 
name: '' 
}

const simpleReducer = (state = defaultState, action) => { 
const {payload, type} = action 
switch (type) { 
case "BUTTON_CLICKED": { 
const {name} = payload 
return { 
...state, 
name 
} 
} 
default: return state 
} 
} 
const clickButton = name => ({ 
type: "BUTTON_CLICKED" 
payload: {name} 
}) 
--- 
Экшен должен возвращать объект, в котором есть поле type - оно определяет, какой именно экшн вызывается и доп поля, которые передают параметры экшена либо еще что-нибудь. 
7) Reducer - если очень просто, это инструкция, то КАК нужно изменить стор при том или ином экшене. То есть если стор - это ЧТО мы изменяем, то редьюсер, КАК мы изменеям 
Пример: 
const defaultState = { 
name: '' 
}

/** 
* Редьсюер это функция, которая всегда возвращет state 
* На входе получает текущий стейт + экшн 
*/ 
const simpleReducer = (state = defaultState, action) => { 
const {payload, type} = action 
switch (type) { 
case "BUTTON_CLICKED": { 
const {name} = payload 
return { 
...state, 
name 
} 
} 
default: return state 
} 
} 
--- 
8) Store - это хранилище данных в redux-e, оно одно и является объектом, по идее это синглтон, который используется всем приложением. Каждый контейнер можно получить доступ к любой части стора. С примером кода тут странно, потому что это по идее обычный объект, который хранит в себе данные.