Redux状态持久化与数据库

Question

从这里的讨论来看,似乎应该将Redux Reducer的状态保存在数据库中.

在这种情况下,用户身份验证之类的功能如何？

对于创建和编辑的每个用户(及其应用程序状态),是否不会创建新的状态对象来替换数据库中的先前状态？

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

编辑:我已经创建了一个示例Redux auth项目,它也恰好是通用Redux的示例,并使用Redux,Socket.io和RethinkDB进行实时更新.

Answer 1

从这里的讨论来看,似乎应该将Redux Reducer的状态保存在数据库中.

为了坚持国家与否,它可能根本不是Redux的关注点.它更多地取决于应用程序逻辑.

如果应用程序中发生了某些事情,例如数据上传到服务器,显然您需要将状态(或状态的一部分)保存到服务器.

由于网络调用是异步的,但Redux是同步的 - 您需要引入额外的中间件,如redux-thunk或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在下次应用程序运行时存储并重新水合.

Answer 2

这些是有效的担忧.使用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()可能在此处有用)并将其存储在会话中.