Я запустил официальный пример redux-loop с небольшим изменением:
fetch
я использую обещание с таймаутом.функция побочного эффекта:
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.log(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.log('next state', store.getState());
console.groupEnd();
return result
};
Настроить хранилище:
const enhancer = compose(
applyMiddleware(logger),
install()
);
const store = createStore(reducer, initialState, enhancer);
Отправка первого действия для запуска всего: (мой код)
store.dispatch(initAction());
выход:
Почему редуктор получил функцию вместо фактического объекта пользователя?
return Promise.resolve((res, rej) => setTimeout(() => res(userId), 1000));
Promise.resolve используется для создания обещания уже в разрешенном состоянии. Он ожидает, что вы перейдете к тому, какое значение должно решить обещание, и в вашем случае вы попросили его разрешить функцию.
Вероятно, вы хотели:
return new Promise((res, rej) => setTimeout(() => res(userId), 1000))