Javascript 以正确的方式将redux thunk与redux promise中间件结合使用
我在react和redux的一个项目中工作,我已经足够新了,所以我试图更好地理解如何一起使用redux thunk和redux promise。 下面您可以看到我的文件,在我的操作中,我创建了一个fetch通用函数apiFetch(),以便在每次需要提取时使用它。此函数返回一个承诺,即我将在loadBooks()中解析,代码正在工作,记录已上载,但当我检查操作日志时,我发现第一个操作未定义,在出现BOOKS\u加载、LOAD\u BOOKS、BOOKS\u加载和LOAD\u BOOKS\u成功后 关于这一点,我有两个问题: 1) 为什么第一个动作没有定义,我加载的是书籍而不是开始加载书籍Javascript 以正确的方式将redux thunk与redux promise中间件结合使用,javascript,reactjs,redux,redux-thunk,redux-promise-middleware,Javascript,Reactjs,Redux,Redux Thunk,Redux Promise Middleware,我在react和redux的一个项目中工作,我已经足够新了,所以我试图更好地理解如何一起使用redux thunk和redux promise。 下面您可以看到我的文件,在我的操作中,我创建了一个fetch通用函数apiFetch(),以便在每次需要提取时使用它。此函数返回一个承诺,即我将在loadBooks()中解析,代码正在工作,记录已上载,但当我检查操作日志时,我发现第一个操作未定义,在出现BOOKS\u加载、LOAD\u BOOKS、BOOKS\u加载和LOAD\u BOOKS\u成功后
action @ 22:54:37.403 undefined
core.js:112 prev state Object {activeBook: null, booksListing: Object}
core.js:116 action function (dispatch) {
var url = './src/data/payload.json';
dispatch(booksIsLoading(true));
return dispatch({
type: 'LOAD_BOOKS',
payload: new Promise(function (resolve) {
…
core.js:124 next state Object {activeBook: null, booksListing: Object}
action @ 22:54:37.404 BOOKS_LOADING
action @ 22:54:37.413 LOAD_BOOKS
action @ 22:54:39.420 BOOKS_LOADING
action @ 22:54:39.425 LOAD_BOOKS_SUCCESS
2) 例如,如果获取的url错误,我希望看到操作LOAD\u BOOKS\u错误,而这是日志的结果:
action @ 23:06:06.837 undefined action @ 23:06:06.837 BOOKS_LOADING
action @ 23:06:06.846 LOAD_BOOKS GET
http://localhost:8000/src/data/payldoad.json 404 (Not Found) error
apiFetch Error: request failed at index.js:66 error
TypeError: Cannot read property 'json' of undefined at index.js:90
如果我不使用apiFetch(),而是使用正常的fetch函数,则所有操作都正常工作,这也是错误的一部分,但无论如何LOAD\u BOOKS不是LOAD\u BOOKS\u START
提前感谢您的帮助
configureStore.js
actions/index.js
常量/application.js
减速器/减速器\u book.js
您指定中间产品的顺序是什么 以下用法使操作未定义: 'applyMiddleware(reduxPromiseMiddleware(),reduxThunk)' 请将订单更改为:(thunk first!) 'applyMiddleware(reduxThunk,reduxPromiseMiddleware())'
import { createStore, applyMiddleware, compose, preloadedState } from 'redux';
import reducers from './configureReducer';
import configureMiddleware from './configureMiddleware';
const middleware = configureMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, preloadedState, composeEnhancers(applyMiddleware(...middleware)));
export default store;
import fetch from 'isomorphic-fetch';
export const booksIsLoading = (bool) => {
return {
type: 'BOOKS_LOADING',
booksLoading: bool,
};
};
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
export const apiFetch = (url) => {
const getPromise = () => (
fetch(url, {
method: 'GET',
})
.then((response) => {
if (response.status !== 200) {
throw Error('request failed');
}
return response;
})
.catch((err) => {
console.log('error apiFetch', err);
// dispatch(fetchBooksError(true));
})
);
return getPromise();
};
export const loadBooks = () => (dispatch) => {
const url = './src/data/payload.json';
dispatch(booksIsLoading(true));
return dispatch({
type: 'LOAD_BOOKS',
payload: new Promise((resolve) => {
delay(2000).then(() => {
apiFetch(`${url}`)
// fetch(`${url}`, {
// method: 'GET',
// })
.then((response) => {
resolve(response.json());
dispatch(booksIsLoading(false));
}).catch((err) => {
console.log('error', err);
});
});
}),
});
};
export const LOAD_BOOKS = 'LOAD_BOOKS';
import initialState from '../model.js';
import * as types from '../constants/application';
export default function (state = initialState, action) {
switch (action.type) {
case `${types.LOAD_BOOKS}_SUCCESS`: {
console.log('reducer', action.payload);
const data = action.payload.data.items;
const items = Object.values(data);
if (items.length > 0) {
return {
...state,
books: Object.values(data),
booksFetched: true,
booksError: false,
};
}
return state;
}
case `${types.LOAD_BOOKS}_ERROR`: {
return {
...state,
booksError: true,
};
}
case 'BOOKS_LOADING':
return {
...state,
booksLoading: action.booksLoading,
};
default:
return state;
}
}