Redux 状态持久化与数据库

Question

从讨论看来，Redux reducer 的状态应该保存在数据库中。

在这种情况下，用户身份验证之类的东西如何工作？

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

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

编辑： 我创建了一个 example Redux auth project，它恰好也是通用 Redux 的例证，并使用 Redux、Socket.io 和 RethinkDB 进行实时更新。

Answer 1

这些担忧是有道理的。使用 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() 在这里可能会有帮助）并将其存储在会话。

Answer 2

From the discussion here it seems that the state of Redux reducers should be persisted in a database.

是否持久化状态，这可能根本不是 Redux 的关注点。这更多取决于应用程序逻辑。

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

由于网络调用是异步的，而 Redux 是同步的 - 您需要引入额外的中间件，如 redux-thunk or redux-promise。

作为注册示例，您可能需要执行该操作，

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 并在下一个应用程序运行.

中重新水化

Redux 状态持久化与数据库

Redux state persistence with a database

flux

reactjs

reactjs-flux

redux