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 = `` } if (status === 'FULFILLED') { const { name, mass, eye_color, films } = payload main.innerHTML = `

${name}

ЖЫРНОСТЬ: ${mass}кг
Цвет глаз
` for (const filmUrl of films) { const filmId = filmUrl.split('/films/')[1].slice(0, -1) main.innerHTML += `Фильм №${filmId}` } } } 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 = `` } if (status === 'FULFILLED') { const { title, opening_crawl, characters } = payload main.innerHTML = `

${title}

${opening_crawl}

` for (const peopleUrl of characters) { const peopleId = peopleUrl.split('/people/')[1].slice(0, -1) main.innerHTML += `Герой №${peopleId}` } } }) 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 += `${name}` } } }) 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()