reactjs - 使用 Link 导航时，具有 next-redux-wrapper 状态的 Next.js 被重置为初始值-6ren

reactjs - 使用 Link 导航时，具有 next-redux-wrapper 状态的 Next.js 被重置为初始值

转载作者：行者123 更新时间：2023-12-05 02:38:06

24

4

Next.js v12.0

next-redux-wrapper.

每当我使用适当的 next/link 元素离开页面然后再次返回(使用另一个 link el)时，状态将重置为初始值，因此会执行另一个提取。奇怪的是，我以相同的方式设置了另一个“事务”切片，除了它包含一组事务对象并且工作正常(导航离开和返回并且数据不会因为它持续存在而重新获取店内)代码低于任何建议，将不胜感激。

商店.js

import { HYDRATE, createWrapper } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import address from "./address/reducer";
import transactions from "./transaction/reducer";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const combinedReducer = combineReducers({
  transactions,
  address,
});

const rootReducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    
    if (state.address.id){
      nextState.address = state.address;
    }
    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};


const initStore = () => {
  return createStore(rootReducer, bindMiddleware([thunkMiddleware]));
};
export const wrapper = createWrapper(initStore);

地址/reducer.js


const addressInitialState = {
  id: null,
  timestamp: null,
  address: null,
  balance: null,
  received: null,
  sent: null,
  groupid: null,
  last_txs: []
};

export default function reducer(state = addressInitialState, action) {
  switch (action.type) {
    case addressActionTypes.GET_WALLET_DETAILS:
      return {id: action.payload.address, ...action.payload};
    default:
      return state;
  }
}

地址/action.js

export const addressActionTypes = {
  GET_WALLET_DETAILS: "GET_WALLET_DETAILS",
};

export const getWalletDetails = (address) => {
  return async (dispatch) => {
    const fetchData = async () => {
      const response = await fetch(
        `https:someapi.com/api/getaddress/?address=${address}`
      );
      if (!response.ok) {
        throw new Error("Could not fetch address data!");
      }

      const data = await response.json();
      console.log('req sent');
      return data;
    };
    try {
      const addressData = await fetchData();
      dispatch({
        type: addressActionTypes.GET_WALLET_DETAILS,
        payload: addressData,
      });
    } catch (err) {
      console.log(err);
    }
  };
};

页面/[地址].js

import { Fragment } from "react";
import Head from "next/head";
import AddressDetails from "../../../components/crypto/rvn/AddressDetails";
import AddressTransactions from "../../../components/crypto/rvn/AddressTransactions";
import { connect } from "react-redux";
import { getWalletDetails } from "../../../store/address/action";
import { wrapper } from "../../../store/store";

function Address(props) {
  return (
    <Fragment>
      <Head>
        <title>RVN</title>
        <meta name="description" content="RVN Address" />
      </Head>
      <AddressDetails address={props.addressDetails}></AddressDetails>
      <AddressTransactions
        transactions={props.addressDetails["last_txs"]}
        address={props.addressDetails.address}
      ></AddressTransactions>
    </Fragment>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    const state = store.getState();
    if(state.address.id === null) {
      await store.dispatch(getWalletDetails(context.params.address));
    }
    else{
      return{
        props: {
          addressDetails: state.address,
        }
      }
    }
  }
);


const mapStateToProps = (state) => ({
  addressDetails: state.address,
});
export default connect(mapStateToProps, null)(Address);

最佳答案

通过转换这个解决了这个问题

const initStore = () => {
  return createStore(rootReducer, bindMiddleware([thunkMiddleware]));
};

在 store.js 中哪个直接来自https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk

对此

const store = createStore(rootReducer, bindMiddleware([thunkMiddleware]));

const initStore = () => {
  return store
};

所以它不会在每次使用包装器时都重新初始化存储

这更符合文档在 https://github.com/kirill-konshin/next-redux-wrapper

关于reactjs - 使用 Link 导航时，具有 next-redux-wrapper 状态的 Next.js 被重置为初始值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69781714/

24

4

0

文章推荐： airflow - 在另一个任务中访问来自 SimpleHTTPOperator 的响应

文章推荐： react-query invalidateQueries 不适用于前缀/URL

java - 如何修改a的字段的字段....如link.next.next.next(.next*n) n次
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
java - 如何修改一个字段的一个公共(public)字段...如link.next.next.next(.next*n) n次
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段，它可以保存另一个链接，该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
javascript - Koa中，中间件中的await next()、return await next()、return next()、next()有什么区别？
文档概述了在中间件中使用“await next()”的用例，导致中间件暂停并触发下游的下一个中间件，直到所有中间件都执行完毕，此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联，那么单独写“
next.js - 将 next 的输出文件夹从 "_next"重命名为 "next"
我今天遇到了一个用例，我试图让我的 nextjs 应用程序在 android webview 中工作，不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
javascript - 使用 .eq(3) 而不是 .next().next().next()
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next.js - next.js 中的 apollo-client with `next-with-apollo` VS next.js 文档常见问题解答中显示的方法(不使用 `getDataFromTree` )
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
next.js - 如何使用 next-auth 在 Next.js 中实现凭据授权？
我尝试使用 next-auth 获取凭据身份验证，但我没有使用它的经验，无论我做什么，我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
next.js - 如何使用 next.js 和 next-i18next 本地化路由？
更改语言时需要更改路线名称。例如，我有一条路线 /en/career但是当我改成捷克语时，我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在，当我在 /en/career 上时
jQuery(this).find ('title' ).next().next().next().eq(0).text();?
更好/优雅的方法是什么？ jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
java - 链表中的节点、node.next 和 node.next.next 是什么？
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止，我们已经了解到节点有两个部分，其中存储数据和下一个节点的地址(node.next)，然后是 node.next.
javascript - jQuery: "$(this).next().next()"有效，但 "$(this).next(' .div')"无效
好的，我正在尝试单独隐藏这组信息。这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
deployment - Next.js 中的 `next export` 和 `next build` 有什么区别？
我开发了一个 Web 应用程序，它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
protecting routes in next js with middleware + next-auth(使用中间件+Next-auth保护Next JS中的路由)
如果我没有通过身份验证，我正在尝试使用NextJS中间件保护一些路由，我正在使用Next-auth进行身份验证，从文档中看，这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是，即使当我通过
javascript - 在 next.config.js 中同时添加对 next-css 和 next-less 的支持
我正在使用 nextJs，需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
typescript - 不支持通过 'next.config.ts' 的错误 : Configuring Next. js。请将文件替换为 'next.config.js'
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
django - 无法解析 ?next= 值来自 http ://login/? next=/my_page/使用 request.GET.get ('next' ,'' )
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
ruby - 为什么 Ruby 中的 `next` 方法会引发 SyntaxError 而 `next!` 或 `self.next` 不会在猴子修补 String 类时引发语法错误？
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
Next-auth session immediately becomes unauthenticated after successful login in a Next.js app(成功登录到Next.js应用程序后，Next-auth会话立即变为未经身份验证)
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后，我立即被重定向到登录页面，表明该会话已变为未经身份验证。。相关代码片段：。_app.tsx：。Layout.tsx：。L
next.js - Next js中具有多个参数的动态路由 - 文件结构
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
next.js - 如何设置 next.js？
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac

首页

博学

6Ren·AI

商城

reactjs - 使用 Link 导航时，具有 next-redux-wrapper 状态的 Next.js 被重置为初始值