使用Redux和ReactRouter登录应用程序

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

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

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

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

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

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

下一步是什么？

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

我是否使用监听器？

来源

2016-11-27 user2449761

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

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访问您的应用程序状态。

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

来源

2016-11-28 19:59:25

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

import {browserHistory} from 'react-router';

而要改变你的路线，

browserHistory.push(<route_where_you want_to_go>);

这将让你改变路线。

来源

2016-11-27 02:14:42

是的，这对我来说很清楚。目前还不清楚我应该如何放置此片段？我的应用程序如何对状态变化做出反应？ – user2449761

使用Redux和ReactRouter登录应用程序

回答

相关问题