反应URL更改但渲染不起作用?

问题描述 投票:2回答:1

我想在api之后重定向到页面,当我调度url更改但视图未呈现时,当我刷新页面时它可以工作。我如何从redux-saga重定向。

saga.js

export function* PQuotation({ payload }) {
 try {
const params = { PurchaseQuotation: payload.toJS() };

const res = yield call(request, `${BASE_URL}/purchase/quotations`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    ...authHeader(),
    module: `${modules.PurchaseQuotation}`,
  },
  body: JSON.stringify(params),
});

  yield put(purchaseQuotationCreateSuccess(res));
  yield put(push(`/some/page`));    //redirect to another page
} catch (err) {
  yield put(purchaseQuotationCreateError(err));
  }
}

app.js

render() {
return (
  <Fragment>
    <Helmet titleTemplate="%s ERP" defaultTitle="ERP">
      <meta name="description" content="ERP Application" />
    </Helmet>
     <BrowserRouter> 
    <Switch>
      <PrivateRoute
        exact
        path="/login"
        render={props => (
          <AuthLayout>
            <Login {...props} />
          </AuthLayout>
        )}
      />
      <PrivateRoute exact path="/logout" component={Logout} />
      <PrivateRoute exact path="/" component={HomePage} /> 
      <PrivateRoute exact path="/some/page" component={SomePage} />          
   </Switch>
    </BrowserRouter>
  </Fragment>
  );
  }
reactjs react-redux react-router redux-saga
1个回答
0
投票

[我建议遵循概念分离原理,其中React组件负责渲染,而Redux-Saga负责副作用。

所以方法应该是:

  1. 佐贺yield put(purchaseQuotationCreateSuccess(res));。我怀疑此操作将更新状态。设置一些变量,指示已成功创建采购报价。说isPurchaseQuoCreated: true
  2. 升级/包装路径<PrivateRoute />,因此它将连接到商店,并且如果成功创建了采购报价,它将重定向。

(以下代码未经测试。用作提示)

const PurchaseQuotationRoute = ({isPurchaseQuoCreated, ...rest}) => (
    isPurchaseQuoCreated ? 
        <Redirect to='/some/page'/>
    :
        <PrivateRoute {...rest} />
)

export default connect(state => ({ isPurchaseQuoCreated: state.isPurchaseQuoCreated }))(PurchaseQuotationRoute) 

并在App.js中使用

    <Switch>
      <PurchaseQuotationRoute
        exact
        path="/login"
        render={props => (
          <AuthLayout>
            <Login {...props} />
          </AuthLayout>
        )}
      />
      <PurchaseQuotationRoute exact path="/logout" component={Logout} />
      <PurchaseQuotationRoute exact path="/" component={HomePage} /> 
      <PrivateRoute exact path="/some/page" component={SomePage} />          
   </Switch>
    </BrowserRouter>

请注意,/some/page <PrivateRoute/>留在原处。如果我们已经在/some/page上,我们就不想重定向。

© www.soinside.com 2019 - 2024. All rights reserved.