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