[英]Why is redux-thunk not working in Storybook?
我已將Storybook UI 開發工具集成到我的create-react-app 中。
一切正常,直到我將addon-redux作為附加組件添加到 Storybook。
.storybook/main.js
module.exports = {
stories: ["../src/components/**/*.stories.js"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"addon-redux", // This one
],
};
包含該行后,開始在我的容器組件中顯示此消息。
這是我的容器組件。
代碼列表.jsx
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";
import { connect } from "react-redux";
import { handleGetTickers } from "../../../actions/tickers";
import Ticker from "../../atoms/Ticker";
function TickerList({ tickers, getTickers }) {
useEffect(() => {
getTickers();
}, []);
return (
<div className="ticker-list">
{tickers.map((item, i) => (
<Ticker
key={i}
name={item.name}
value={item.value}
percentage={item.percentage}
/>
))}
</div>
);
}
function mapStateToProps(state) {
return {
tickers: state.tickers,
};
}
function mapDispatchToProps(dispatch) {
return {
getTickers: () => dispatch(handleGetTickers()),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(TickerList);
這是我的handleTickers動作創建者。
export const GET_TICKERS = "GET_TICKERS";
function getTickers(tickers) {
return {
type: GET_TICKERS,
payload: tickers,
};
}
// handleGetTickers
export function handleGetTickers() {
return async (dispatch) => {
const res = await fetchData("/data/tickers.json");
if (res.ok) {
const result = await res.json();
dispatch(getTickers(result.data));
}
}
眾所周知,我們需要包含 thunk 來處理這些類型的操作。 所以我在創建我的 Redux Store 時包含了它。 同樣的商店也導入到 Storybook。
商店.js
import { createStore, compose, applyMiddleware } from "redux";
import { enhancer as withReduxEnhancer } from "addon-redux"; // This is use for connect the App Redux Store with Storybook
import invariant from "redux-immutable-state-invariant";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import reducer from "./reducers";
const createMiddlewareEnhancer = () => {
const middleware = [thunk];
if (process.env.NODE_ENV !== "production") {
middleware.push(invariant());
middleware.push(createLogger());
}
return applyMiddleware(...middleware);
};
const createEnhancer = () => {
const enhancers = [];
enhancers.push(createMiddlewareEnhancer());
if (process.env.NODE_ENV !== "production") {
enhancers.push(withReduxEnhancer);
}
return compose(...enhancers);
};
const store = createStore(reducer, createEnhancer());
export default store;
那么為什么它可以在瀏覽器中完美運行,而不僅僅是在 Storybook 中呢? 我在這里錯過了什么嗎?
感謝任何幫助。
Redux-thunk 是一個中間件,但是addon-redux
目前在中間件方面存在問題。 但也有可能的解決方案。
如果你使用的是 redux-thunk,你的 React UI 會觸發動作,其中動作是一個函數而不是一個對象。 由於 addon-redux 忽略中間件,因此 redux-thunk 中間件被忽略,然后拋出一個錯誤,Redux 發現一個動作是一個函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.