|
|
@@ -1,187 +0,0 @@
|
|
|
-function createStore(reducer) {
|
|
|
- let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
|
|
|
- let cbs = [] //массив подписчиков
|
|
|
-
|
|
|
- const getState = () => state //функция, возвращающая переменную из замыкания
|
|
|
- const subscribe = cb => (cbs.push(cb), //запоминаем подписчиков в массиве
|
|
|
- () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
|
|
|
-
|
|
|
- const dispatch = action => {
|
|
|
- if (typeof action === 'function') { //если action - не объект, а функция
|
|
|
- return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
|
|
|
- }
|
|
|
- const newState = reducer(state, action) //пробуем запустить редьюсер
|
|
|
- if (newState !== state) { //проверяем, смог ли редьюсер обработать action
|
|
|
- state = newState //если смог, то обновляем state
|
|
|
- for (let cb of cbs) cb(state) //и запускаем подписчиков
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- getState, //добавление функции getState в результирующий объект
|
|
|
- dispatch,
|
|
|
- subscribe //добавление subscribe в объект
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function combineReducers(reducers) {
|
|
|
- function totalReducer(state = {}, action) {
|
|
|
- const newTotalState = {}
|
|
|
- for (const [reducerName, reducer] of Object.entries(reducers)) {
|
|
|
- const newSubState = reducer(state[reducerName], action)
|
|
|
- if (newSubState !== state[reducerName]) {
|
|
|
- newTotalState[reducerName] = newSubState
|
|
|
- }
|
|
|
- }
|
|
|
- if (Object.keys(newTotalState).length) {
|
|
|
- return { ...state, ...newTotalState }
|
|
|
- }
|
|
|
- return state
|
|
|
- }
|
|
|
-
|
|
|
- return totalReducer
|
|
|
-}
|
|
|
-
|
|
|
-const reducers = {
|
|
|
- promise: promiseReducer, //допилить много имен для многих промисо
|
|
|
- //auth: authReducer, //часть предыдущего ДЗ
|
|
|
- //cart: cartReducer, //часть предыдущего ДЗ
|
|
|
-}
|
|
|
-
|
|
|
-const totalReducer = combineReducers(reducers)
|
|
|
-
|
|
|
-
|
|
|
-function promiseReducer(state = {}, { type, status, payload, error }) {
|
|
|
- if (type === 'PROMISE') {
|
|
|
- //имена добавить
|
|
|
- return { status, payload, error }
|
|
|
- }
|
|
|
- return state
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-//имена добавить
|
|
|
-const actionPending = () => ({ type: 'PROMISE', status: 'PENDING' })
|
|
|
-const actionFulfilled = payload => ({ type: 'PROMISE', status: 'FULFILLED', payload })
|
|
|
-const actionRejected = error => ({ type: 'PROMISE', status: 'REJECTED', error })
|
|
|
-
|
|
|
-//имена добавить
|
|
|
-const actionPromise = promise =>
|
|
|
- async dispatch => {
|
|
|
- dispatch(actionPending()) //сигнализируем redux, что промис начался
|
|
|
- try {
|
|
|
- const payload = await promise //ожидаем промиса
|
|
|
- dispatch(actionFulfilled(payload)) //сигнализируем redux, что промис успешно выполнен
|
|
|
- return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
|
|
|
- }
|
|
|
- catch (error) {
|
|
|
- dispatch(actionRejected(error)) //в случае ошибки - сигнализируем redux, что промис несложился
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-const store = createStore(totalReducer) //не забудьте combineReducers если он у вас уже есть
|
|
|
-store.subscribe(() => console.log(store.getState()))
|
|
|
-
|
|
|
-const drawPeople = (state) => {
|
|
|
- const [, route] = location.hash.split('/')
|
|
|
- if (route !== 'people') return
|
|
|
-
|
|
|
- const { status, payload, error } = store.getState().promise//.имя другое
|
|
|
- if (status === 'PENDING') {
|
|
|
- main.innerHTML = `<img src='https://cdn.dribbble.com/users/63485/screenshots/1309731/infinite-gif-preloader.gif' />`
|
|
|
- }
|
|
|
- if (status === 'FULFILLED') {
|
|
|
- const { name, mass, eye_color, films } = payload
|
|
|
- main.innerHTML = `<h1>${name}</h1>
|
|
|
- <section>ЖЫРНОСТЬ: ${mass}кг</section>
|
|
|
- <section style="color: ${eye_color}">Цвет глаз</section>
|
|
|
- `
|
|
|
- for (const filmUrl of films) {
|
|
|
- const filmId = filmUrl.split('/films/')[1].slice(0, -1)
|
|
|
- main.innerHTML += `<a href="#/films/${filmId}">Фильм №${filmId}</a>`
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-store.subscribe(drawPeople)
|
|
|
-
|
|
|
-store.subscribe(() => {
|
|
|
- const [, route] = location.hash.split('/')
|
|
|
- if (route !== 'films') return
|
|
|
-
|
|
|
- const { status, payload, error } = store.getState().promise//.имя одно
|
|
|
- if (status === 'PENDING') {
|
|
|
- main.innerHTML = `<img src='https://cdn.dribbble.com/users/63485/screenshots/1309731/infinite-gif-preloader.gif' />`
|
|
|
- }
|
|
|
- if (status === 'FULFILLED') {
|
|
|
- const { title, opening_crawl, characters } = payload
|
|
|
- main.innerHTML = `<h1>${title}</h1>
|
|
|
- <p>${opening_crawl}</p>
|
|
|
- `
|
|
|
- for (const peopleUrl of characters) {
|
|
|
- const peopleId = peopleUrl.split('/people/')[1].slice(0, -1)
|
|
|
- main.innerHTML += `<a href="#/people/${peopleId}">Герой №${peopleId}</a>`
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const actionGetPeople = id => //имя другое
|
|
|
- actionPromise(fetch(`https://swapi.dev/api/people/${id}`).then(res => res.json()))
|
|
|
-
|
|
|
-const actionGetFilm = id =>
|
|
|
- actionPromise(fetch(`https://swapi.dev/api/films/${id}`).then(res => res.json()))
|
|
|
-
|
|
|
-const actionSomePeople = () =>
|
|
|
- actionPromise(fetch(`https://swapi.dev/api/people/`).then(res => res.json()))
|
|
|
-
|
|
|
-store.dispatch(actionSomePeople())
|
|
|
-
|
|
|
-store.subscribe(() => {
|
|
|
- const { status, payload, error } = store.getState().promise//.имя третье
|
|
|
- if (status === 'FULFILLED' && payload.results) {
|
|
|
- aside.innerHTML = ''
|
|
|
- for (const { url: peopleUrl, name } of payload.results) {
|
|
|
- const peopleId = peopleUrl.split('/people/')[1].slice(0, -1)
|
|
|
- aside.innerHTML += `<a href="#/people/${peopleId}">${name}</a>`
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-window.onhashchange = () => {
|
|
|
- const [, route, _id] = location.hash.split('/')
|
|
|
-
|
|
|
- const routes = {
|
|
|
- people() {
|
|
|
- console.log('People', _id)
|
|
|
- store.dispatch(actionGetPeople(_id))
|
|
|
- },
|
|
|
- films() {
|
|
|
- store.dispatch(actionGetFilm(_id))
|
|
|
- },
|
|
|
- //category() {
|
|
|
- //store.dispatch(actionCategoryById(_id))
|
|
|
- //},
|
|
|
- //good(){
|
|
|
- ////тут был store.dispatch goodById
|
|
|
- //console.log('good', _id)
|
|
|
- //},
|
|
|
- login() {
|
|
|
- console.log('А ТУТ ЩА ДОЛЖНА БЫТЬ ФОРМА ЛОГИНА')
|
|
|
- //нарисовать форму логина, которая по нажатию кнопки Login делает store.dispatch(actionFullLogin(login, password))
|
|
|
- },
|
|
|
- //register(){
|
|
|
- ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
|
|
|
- //},
|
|
|
- }
|
|
|
-
|
|
|
- if (route in routes) {
|
|
|
- routes[route]()
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-window.onhashchange()
|
