文章/答案/技术大牛

发布

社区首页 >问答首页 >使用链接导航时，具有next-redux-wrapper状态的Next.js将被重置为初始值

问使用链接导航时，具有next-redux-wrapper状态的Next.js将被重置为初始值
EN

Stack Overflow用户

提问于 2021-10-30 20:00:48

回答 1查看 1.1K关注 0票数 1

Next.js v12.0

next-redux-wrapper。

每当我使用适当的next/link元素离开页面，然后再次返回(使用另一个链接el)时，状态将被重置为初始值，因此将执行另一个抓取。奇怪的是，我有另一个“事务”片以相同的方式设置，除了它持有一个事务对象数组，并且其中一个工作得很好(来回导航，数据不会被重新获取，因为它持久化在存储中)代码低于任何建议都是非常感谢的。

store.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;
  }
}

address/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);
    }
  };
};

pages/address.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);

reactjs

redux

next.js

next-redux-wrapper

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-02 00:17:18

解决这个问题的方法是将

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

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

到这个

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

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

因此，它不会在每次使用包装器时重新初始化存储区。

这与https://github.com/kirill-konshin/next-redux-wrapper上的文档更加一致

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69781714

复制

相似问题

问使用链接导航时，具有next-redux-wrapper状态的Next.js将被重置为初始值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用链接导航时，具有next-redux-wrapper状态的Next.js将被重置为初始值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用链接导航时，具有next-redux-wrapper状态的Next.js将被重置为初始值
EN