Reactjs 使用数据库进行Redux状态持久化

从讨论中可以看出，Redux reducer的状态应该保存在数据库中

在这个实例中，类似用户身份验证的东西是如何工作的

是否会为创建和编辑的每个用户（及其应用程序状态）创建一个新的状态对象来替换数据库中以前的状态

在前端使用所有这些数据并不断更新数据库中的状态是否有效

---

编辑：我创建了一个示例，它恰好也演示了通用Redux，以及使用Redux、Socket.io和RejectDB进行实时更新。

这些都是值得关注的问题。使用

localStorage

在前端保持状态可能是更好的策略。您可以使用中间件实现此功能，例如：

import {createStore, compose, applyMiddleware} from 'redux';

const localStorageMiddleware = ({getState}) => {
  return (next) => (action) => {
    const result = next(action);
    localStorage.setItem('applicationState', JSON.stringify(
      getState()
    ));
    return result;
  };
};

const store = compose(
  applyMiddleware(
    localStorageMiddleware
  )
)(createStore)(
  reducer,
  JSON.parse(localStorage.getItem('applicationState'))
)

如果您担心敌人访问用户的笔记本电脑并从中窃取凭据，您可以在用户离开页面时将状态保留到后端（

Navigator.sendBeacon（）

），并将其存储在会话中

从这里的讨论看来，Redux还原程序的状态应该持久化到数据库中

不管状态是否持续，Redux可能根本不关心这个问题。这更取决于应用程序逻辑

若应用程序中发生了一些事情，比如数据上传到服务器，显然您需要保存状态（或者将状态的一部分保存到服务器）

由于网络调用是异步的，但Redux是同步的，所以需要引入额外的中间件，如或

作为注册示例，您可能需要这些操作

export function creatingAccount() {
  return { type: 'CREATING_ACCOUNT' };
}

export function accountCreated(account) {
  return { type: 'ACCOUNT_CREATED', payload: account };
}

export function accountCreatingFailed(error) {
  return { type: 'ACCOUNT_CREATING_FAILED', payload: error };
}

export function createAccount(data, redirectParam) {
  return (dispatch) => {
    dispatch(creatingAccount());

    const url = config.apiUrl + '/auth/signup';

    fetch(url).post({ body: data })
      .then(account => {
        dispatch(accountCreated(account));
      })
      .catch(err => {
        dispatch(accountCreatingFailed(err));
      });
  };
}

---

状态的某些部分，例如授权后的用户对象，可能会存储到

localStore

，并在下一次应用程序运行时重新水合。

这非常有帮助-感谢您的明确响应！谢谢你的澄清。在数据库中存储用户凭据有意义吗？当然！您仍然希望将信息存储在后端，

localStorage

是暂时的，您不应该假设数据在后端的使用时间超过30天。

localStorage

的用例包括存储身份验证令牌、当前页面、从后端加载的数据（以避免重新加载）。Redux状态包含很多这样的内容，这就是为什么在页面加载之间对其进行重新水化是有意义的。在后端存储数据通常是不必要的，有时，另一种方法更有意义。本地存储永远不应用于存储身份验证信息，因为它非常容易受到XSS攻击=>本地存储不是特定于域的，因此攻击者甚至不必向您的站点中注入脚本来访问它-他们只需让无意中的受害者转到

{$somevildomain}.com

，然后从那里运行一个脚本，该脚本将捕获本地的所有内容storage@Martin我对XSS漏洞的疏忽。但您如何访问跨域本地存储？@AshtonWar-事实上我的回忆不正确-您不能枚举所有域的所有密钥，但您可以通过一些特定的域来锁定特定的域，但是tom line将身份验证数据存储在本地存储器（或任何敏感信息）中，这通常会受到安全人员的反对