Почему действия redux-loop пропускают все промежуточное ПО?

Я запускаю официальный пример redux-loop с небольшими изменениями:

  1. Вместо fetch я использую обещание с таймаутом.
  2. Я добавил промежуточное ПО для журналов (копирование и вставка из учебника redux.js.org).

функция побочного эффекта:

import {createStore, compose, applyMiddleware} from 'redux';
import {install, loop, Cmd} from 'redux-loop';

function fetchUser(userId) {
    return Promise.resolve((res, rej) => setTimeout(() => res(userId), 1000));
}

Действия:

function initAction() {
    return {
        type: 'INIT'
    };
}

function userFetchSuccessfulAction(user) {
    return {
        type: 'USER_FETCH_SUCCESSFUL',
        user
    };
}

function userFetchFailedAction(err) {
    return {
        type: 'USER_FETCH_ERROR',
        err
    };
}

Начальное состояние:

const initialState = {
        initStarted: false,
        user: null,
        error: null
    };

Редуктор:

function reducer(state = initialState, action) {
        console.info(action);  // I added this line
        switch (action.type) {
            case 'INIT':
                return loop(
                    {...state, initStarted: true},
                    Cmd.run(fetchUser, {
                        successActionCreator: userFetchSuccessfulAction,
                        failActionCreator: userFetchFailedAction,
                        args: ['1234']
                    })
                );

            case 'USER_FETCH_SUCCESSFUL':
                return {...state, user: action.user};

            case 'USER_FETCH_FAILED':
                return {...state, error: action.error};

            default:
                return state;
        }
    }

Мое настраиваемое промежуточное ПО для журналов:

    const logger = store => next => action => {
        console.group(action.type);
        console.info('dispatching', action);
        let result = next(action);
        console.info('next state', store.getState());
        console.groupEnd();
        return result
    };

Настроить магазин:

const enhancer = compose(
        applyMiddleware(logger),
        install()
    );

    const store = createStore(reducer, initialState, enhancer);

Отправка первого действия для запуска всего: (мой код)

store.dispatch(initAction());

выход:

Почему действия redux-loop пропускают все промежуточное ПО?


Как видите, второе действие пропустило мое промежуточное программное обеспечение журнала, а также последняя строка журнала мне непонятна. Почему редуктор получил функцию вместо фактического объекта пользователя?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
305
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Why the reducer received a function instead of the actual user object?

return Promise.resolve((res, rej) => setTimeout(() => res(userId), 1000));

Promise.resolve используется для создания обещания уже в разрешенном состоянии. Он ожидает, что вы передадите, какое значение должно разрешить обещание, и в вашем случае вы попросили его разрешить функцию.

Вы, наверное, хотели сделать:

return new Promise((res, rej) => setTimeout(() => res(userId), 1000))

Да, это то, что я имел в виду, но я все еще вижу, что второе действие создает скрипт для промежуточного программного обеспечения журнала. Почему?

Stav Alfi 27.10.2018 15:19

Поскольку я не знаком с redux-loop, я не могу помочь с этой частью вашего вопроса.

Nicholas Tower 27.10.2018 15:20

Хорошо, спасибо за помощь :)

Stav Alfi 27.10.2018 15:22

Да, переход на новый Promise должен решить второй вопрос. Во-первых, попробуйте изменить порядок составления параметров. consthancer = compose (install (), applyMiddleware (регистратор)); Заказ промежуточного программного обеспечения может сбивать с толку. Самый простой способ - это обычно метод проб и ошибок. redux-loop.js.org/docs/api-docs/install.html

bdwain 28.10.2018 03:39

Другие вопросы по теме