使用Redux和ReactRouter登录应用程序

  • Z时代
  • 2024-01-10
  • 分类：问答

如果有人能够在理解Redux体系结构时指出我正确的方向，我将非常感激。使用Redux和ReactRouter登录应用程序

我应该执行“reducer”函数来处理我的操作。 减速机功能应结合使用并创建一个商店。

可以说我有一个LoginForm的（反应）成分，使一个XHR请求后端API，并且作为响应接收JWT令牌。

当我从API的响应，我应该像派遣一个动作：

store.dispatch({type: "USER_LOGGED_IN", 
       payload: {username: "john", JWT: "..."});

这将更新我的应用程序的状态。

下一步是什么？

如何转到下一页？如何使用登录的用户名重新渲染我的组件（如导航栏等）？

我是否使用监听器？

回答：

让我们说你的方法来授权用户：

import { browserHistory } from 'react-router'; 
// ... 
function promisedApiCall(inputData) { 
    // ... 
    // api request to backend with input data 
    // return a promise 
} 
/* 
* on form submit we call this with input data 
*/ 
function authorizeUser(inputData) { 
    return promisedApiCall(inputData) 
     .then((response) => store.dispatch({ 
      type: "USER_LOGGED_IN", 
      payload: { 
       username: response.userName, 
       JWT: response.JWT 
      } 
     })) 
     .then(() => browserHistory.push('/success/path/url')) 
     .catch(() => browserHistory.push('/failure/path/url')); 
}

假设你有以下先决条件：

  • 创建终极版存储和store对象提供的范围，其中authorizeUser()被执行。

  • 方法promisedApiCall是，这使得从LoginForm与输入数据到后端的请求的功能。

  • promisedApiCall应返回promise。 [这是非常重要的]

  • 配置react-router with redux

一旦完成，应用程序状态与用户信息更新以及用户将被重定向到一个新的一页。这post解释更多关于使用react-router以编程方式重定向。

使用Redux connect访问您的应用程序状态。

现在，您已将组件中的用户信息作为道具使用。

回答：

react-router有分量browserHistory。你可以导入这样的，

import {browserHistory} from 'react-router';

而要改变你的路线，

browserHistory.push(<route_where_you want_to_go>);

这将让你改变路线。

以上是 使用Redux和ReactRouter登录应用程序 的全部内容， 来源链接： utcz.com/qa/259339.html

回到顶部