Question

如果有人能指出我理解Redux架构的正确方向，我将感激不尽。

我应该实施＆＃34; reducer＆＃34;将处理我的行为的函数。应该组合Reducer功能并创建商店。

假设我有一个LoginForm（React）组件，该组件向后端API发出XHR请求，并在响应中接收JWT令牌。

当我从API获得响应时，我应该发出类似以下的操作：

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

这会更新我的申请状态。

下一步是什么？

如何路由到下一页？如何使用登录的用户名重新呈现我的组件（如导航栏等）？

我是否使用听众？

Answer 1

假设您有一种授权用户的方法：

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'));
}

假设您有以下先决条件：

创建的redux store和store对象在执行authorizeUser()的范围内可用。
方法promisedApiCall是使用LoginForm的输入数据发出后端请求的函数。
promisedApiCall应返回promise。 [这非常重要]
已配置react-router with redux

完成此操作后，将使用用户信息更新应用状态，并且用户也将被重定向到新页面。这个post解释了有关使用react-router以编程方式重定向的更多信息。

使用Redux connect在您的组件中访问您的应用状态。

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

Answer 2

react-router有一个组件browserHistory。您可以像这样导入

import {browserHistory} from 'react-router';

改变你的路线，

browserHistory.push(<route_where_you want_to_go>);

这将允许您更改路线。

使用Redux＆amp; amp;登录应用程序ReactRouter

2 个答案: