使用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登錄應用程序

回答

相關問題