[英]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.