Next.js 保留 state 或在 router.push 時發送道具

Question

我是 Next.js 的新手，我正在使用router.push將用戶重定向到下一頁

router.push("/terminal_summary");

我的 Redux state 在下一頁是空的，但我需要 state 中的數據。 我該如何保留它，或者至少如何使用router.state發送一些道具？

我試過router.push("/terminal_summary", undefined, { shallow: true }); 但它不起作用。

我也試過：

router.push({
  pathname: '/terminal_summary',
  query: props.terminalPayload
})

但它在查詢參數中發送數據。

最好的辦法是將所有數據保留在 state 中，或者至少我希望能夠使用道具重定向。

編輯：

在下一頁上，我正在嘗試使用 mapStateToProps 訪問 Redux mapStateToProps

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload,
  };
}

但是重定向后的這個 state 顯示的是initialState而不是我在上一頁所做的更改。

所以值是{}但它應該是 object ，如下所示。

{
   merchant: [{ /*multiple objects*/ }],
   products: [{ /* multiple products*/}],
   // other data
}

請注意，這目前沒有保存在數據庫中，應該保存在我要顯示摘要的下一頁上，然后要求用戶保存。

另請注意，我可以在 Chrome 中看到來自 Redux DevTools 的數據，但是當我在頁面上訪問時，它是{} 。

編輯2：

這是完整的 redux 代碼：

configureStore.js

export default (initialState) => {
  return createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunk, reduxImmutableStateInvariant()))
  );
};

減速器/index.js

const rootReducer = combineReducers({
  terminals,
  merchants,
  distributors,
  terminalPayload,
  roles,
  /* other reducers */
});

export default rootReducer;

初始狀態.js

export default {
  terminals: {
    imported: [],
  },
  merchants: [],
  distributors: [],
  terminalPayload: {},
  roles: [],
};

我正在使用 next.js 所以我有 _app.js 文件，其中有以下代碼：

import configureStore from "../redux/configureStore";

function MyApp({ Component, pageProps }) {
  let state = {};
  const store = configureStore();

  return (
    <Provider store={store}>
      <Layout>
        <Component {...state} />
      </Layout>
    </Provider>
  );
}

然后我有一些動作，我在哪里訂閱它

終端.js

const terminal = (props) => {
     const router = useRouter();
     /* functions */
     /* i have a function here that use router.push('terminal_summary') to redirect user to next page */
     return /* jsx */
}

function mapStateToProps(state) {
  return {
    terminals: state.terminals,
    terminalPayload: state.terminalPayload,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    terminalActions: bindActionCreators(terminalActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(terminal);

terminal_summary.js

const terminalSummary = (props) => {
  const router = useRouter();


  return (
    /* jsx */
  );
};

terminalSummary.propTypes = {
  terminalPayload: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload, // this object is empty here {} which is supposed to be same as i had on terminal.js page
  };
}

function mapDispatchToProps(dispatch) {
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(terminalSummary);

我一直在研究這個，我不確定它是否與此有關：

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps https://github.com/kirill-konshin/next-redux-wrapper

Answer 1

Nextjs 並不像許多其他常見的客戶端路由/導航庫那樣真正允許路由 state，但您可以通過查詢參數發送數據，然后使用router.push的as參數從地址欄中“隱藏”它們。

as - 將在瀏覽器中顯示的 URL 的可選裝飾器。 在 Next.js 9.5.3 之前，它用於動態路由，查看我們之前的文檔以了解它是如何工作的

router.push(
  {
    pathname: '/terminal_summary',
    query: props.terminalPayload
  },
  '/terminal_summary',
);

在接收路由上訪問query object。

const router = useRouter();
const terminalPayload = router.query; // <-- terminalPayload sent in query parameter