GennadySht
/
HomeWork


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<header>reducers</header>

<body>
    <div id="testDiv">
        Test
    </div>

    <script>
        function jwtDecode(token) {
            if (!token || typeof token != "string")
                return undefined;
            let tokenArr = token.split(".");
            if (tokenArr.length != 3)
                return undefined;
            try {
                let tokenJsonStr = atob(tokenArr[1]);
                let tokenJson = JSON.parse(tokenJsonStr);
                return tokenJson;
            }
            catch {
                return undefined;
            }
        }
        function gql(url, query, vars) {
            let fetchSettings =
            {
                method: "POST",
                headers:
                {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify(
                    {
                        query: query,
                        variables: vars

                    })
            };
            return fetch(url, fetchSettings).then(res => res.json());
        }
        function signIn(login, password, url) {
            const loginQuery =
                `query login($login:String, $password:String){
                login(login:$login, password:$password)
            }`;
            return gql(
                url,
                loginQuery,
                { login: login, password: password });
        }


        function TreatAuth({ payload }, state) {
            let newState = { ...state };
            newState.auth = { ...state.auth };
            newState.auth.state = { token: payload.data.login, payload: jwtDecode(payload.data.login) };
            return newState;
        }

        function TreatBuy({ status, payload }) {

        }

        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
        function promiseReducer(state = {}, action) {
            if (action) {
                if (action.type === 'PROMISE') {
                    let newState = TreatPayload(action, "buy", state, TreatBuy);
                    newState = TreatPayload(action, "auth", newState, TreatAuth);
                    return newState;
                }
            }
            return state;
        }

        function TreatPayload(action, key, state, onPayloadFunc) {
            let result = state;
            let keyAction = action[key];
            if (keyAction) {
                result = changeStatus(key, state, action);
                if (state !== result && keyAction.status == "FULLFILLED")
                    onPayloadFunc(keyAction, result)
            }
            return result;
        }
        function changeStatus(key, state, action) {
            let result = state;
            let actionData = action[key];
            if (actionData) {
                let stateData = state[key];
                let status = actionData.status;
                if (!stateData || stateData.status !== status) {
                    let newStateForKey = { ...stateData, ...{ status: status } };
                    result = { ...state };
                    result[key] = newStateForKey;
                    if (status == "REJECTED")
                        newStateForKey.error = actionData.error;
                }
            }
            return result;
        }

        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, которая удаляет подписчика из списка

            function 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() //и запускаем подписчиков
                }
            }

            return {
                getState, //добавление функции getState в результирующий объект
                dispatch,
                subscribe //добавление subscribe в объект
            }
        }

        function actionPromise({ name, promise }) {
            return async function Exec(dispatch) {
                let action = { type: "PROMISE" };
                action[name] = { status: "PENDING" };
                dispatch(action) //сигнализируем redux, что промис начался

                try {
                    const payload = await promise //ожидаем промиса;
                    action = { type: "PROMISE" };
                    action[name] = { status: "FULLFILLED", payload: payload };
                    dispatch(action) //сигнализируем redux, что промис успешно выполнен
                    return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
                }
                catch (error) {
                    action = { type: "PROMISE" };
                    action[name] = { status: "REJECTED", error: error };
                    dispatch(action) //в случае ошибки - сигнализируем redux, что промис несложился
                }
            };
        }

        const store = createStore(promiseReducer)

        store.subscribe(() => {
            let state = store.getState();
            if (state.buy) {
                if (state.buy.status == "PENDING")
                    testDiv.style.color = "orange";
                else if (state.buy.status == "FULLFILLED")
                    testDiv.style.color = "green";
                else if (state.buy.status == "REJECTED") {
                    testDiv.style.color = "red";
                    testDiv.innerText = state.buy.errorMessage;
                }
            }
        });

        let execFunc = actionPromise({ name: "auth", promise: signIn("test457", "123123", "http://shop-roles.node.ed.asmer.org.ua/graphql") });
        store.dispatch(execFunc);

        /*
                const actionPending = () => ({ type: 'PROMISE', status: 'PENDING' })
                const actionFulfilled = payload => ({ type: 'PROMISE', status: 'FULFILLED', payload })
                const actionRejected = error => ({ type: 'PROMISE', status: 'REJECTED', error })
        
        
                store.subscribe(() => console.log(store.getState()))
        
                store.dispatch({ type: 'COUNTER_INC' })
                store.dispatch({ type: 'BOOLEAN_SET' })
                store.dispatch({ type: 'COUNTER_INC' })
                store.dispatch({ type: 'BOOLEAN_TOGGLE' })
                store.dispatch({ type: 'COUNTER_DEC' })
                store.dispatch({ type: 'ДИЧЬ' }) //не вызывает подписчика
        */

    </script>
</body>

function combineReducers(reducers) {
function totalReducer(totalState = {}, action) {
const newTotalState = {} //объект, который будет хранить только новые состояния дочерних редьюсеров

//цикл + квадратные скобочки позволяют написать код, который будет работать с любыми количеством дочерных редьюсеров
for (const [reducerName, childReducer] of Object.entries(reducers)) {
const newState = childReducer(totalState[reducerName], action) //запуск дочернего редьюсера
if (newState !== totalState[reducerName]) { //если он отреагировал на action
newTotalState[reducerName] = newState //добавляем его в newTotalState
}
}

//Универсальная проверка на то, что хотя бы один дочерний редьюсер создал новый стейт:
if (Object.values(newTotalState).length) {
return { ...totalState, ...newTotalState } //создаем новый общий стейт, накладывая новый стейты дочерних редьюсеров на
старые
}

return totalState //если экшен не был понят ни одним из дочерних редьюсеров, возвращаем общий стейт как был.
}

return totalReducer
}

//////


/////