reactjs - NextJS redux-saga 状态未更新
问题描述
我正在尝试使用 redux-saga 在 nextjs 中获取数据。但是我的数据不会显示,然后我在每个文件中调试,最后发现数据已成功获取,但状态不会更新。我一直在关注文档,但不知道导致问题的部分。谢谢你的帮助
默认状态
{
status: 'init',
data: [],
error: null,
}
佐贺
export function* getCars() {
try {
const options = {
url: `http://localhost/some-endpoint`,
method: 'GET',
}
yield put({
type: ACTION_TYPES.CARS.LOAD,
});
const response = call(axios, options);
if (response.data) {
const { data, status } = response;
yield put({
type: ACTION_TYPES.CARS.RES,
payload: { data, status },
});
} else {
yield put({
type: ACTION_TYPES.CARS.ERR,
error: response.status,
});
}
} catch (err) {
yield put({
type: ACTION_TYPES.CARS.ERR,
error: err,
});
}
}
export default function* combineSaga() {
yield takeEvery(ACTION_TYPES.CARS.GET, getCars);
}
减速器
const defaultState = DEFAULT_STATE.CARS;
function reducer(state = defaultState, action) {
switch (action.type) {
case ACTION_TYPES.CARS.LOAD:
return {
...state,
status: 'loading',
};
case ACTION_TYPES.CARS.RES:
return {
...state,
data: action.payload.data,
status: 'success',
};
case ACTION_TYPES.CARS.ERR:
return {
...state,
status: 'error',
error: action.error,
};
default:
return state;
}
}
export default reducer;
存储配置
const makeStore = () => {
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
rootReducer,
applyMiddleware(sagaMiddleware),
)
store.sagaTask = sagaMiddleware.run(rootSaga)
return store
}
export default createWrapper(makeStore);
应用程序.js
function MyApp({ Component, pageProps }) {
return (
<div>
<Component {...pageProps} />
</div>
);
}
MyApp.getInitialProps = async appContext => {
const { Component, ctx } = appContext;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
export default wrapper.withRedux(withReduxSaga(MyApp));
索引.js
function Home({ storeCars }) {
useEffect(() => {
//always show default state
console.log(storeCars);
}, [storeCars.status]);
return <div>Home</div>;
}
Home.getInitialProps = async props => {
const { store } = props;
store.dispatch({
type: ACTION_TYPES.CARS.GET,
payload: {},
});
return {};
}
export default connect(state => state)(Home);
解决方案
你需要 2 个动作
- getDataFromServer 用于 Home 组件
- setDataToRedux 用于 saga 和 reducer 中的动作类型
推荐阅读
- jupyter-notebook - 为什么我的 PyCharm 专业版打不开 Jupyter Notebook
- fairlearn - 多类分类的公平性指标
- java - Using maven to push an artifact to Gitlab
- python - 使用 argaprse 导入模块并在脚本中使用 argparse
- python - Python Pandas - 遍历 .xlsx 文件的文件夹,仅使用正则表达式从名称中带有 xx.xx 的 Excel 选项卡添加数据
- asp.net - GridView 控件内的图片
- visual-studio-code - Microsoft Visual Studio Code Remote-SSH 无法建立连接
- imap - 当 Message-Id 包含“%”时,Gmail 中的 IMAP SEARCH 失败
- docker - 带有 docker-compose 的“坏网关”nginx
- python - 训练模型——我们试图为整个数据集构建预测的类别有多少数据?