reactjs - Next.js 在 router.push 时保持状态或发送 props

问题描述

我是 Next.js 的新手，我正在使用将用户重定向到下一页router.push

router.push("/terminal_summary");

我的 Redux 状态在下一页上是空的，但我需要状态中的数据。我该如何保留它，或者至少如何发送一些道具router.state？

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

我也试过：

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

但它在查询参数中发送数据。

最好的办法是将所有数据保持在状态，或者至少我希望能够使用道具重定向。

编辑：

在下一页上，我正在尝试使用访问 Redux 状态mapStateToProps

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

但是显示重定向后的这种状态，initialState而不是我在上一页所做的更改。

所以值是{}，但它应该是像下面这样的对象。

{
   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

标签： reactjsreact-reduxnext.js

reactjs - Next.js 在 router.push 时保持状态或发送 props

问题描述

解决方案

推荐阅读