web-dev-qa-db-fra.com

Persistance de l'état Redux avec une base de données

D'après la discussion ici il semble que l'état des réducteurs Redux devrait être conservé dans une base de données.

Comment fonctionne quelque chose comme l'authentification des utilisateurs dans cette instance?

Un nouvel objet d'état ne serait-il pas créé pour remplacer l'état précédent dans la base de données pour chaque utilisateur (et l'état de leur application) créé et modifié?

L'utilisation de toutes ces données sur le front-end et la mise à jour constante de l'état dans la base de données seraient-elles efficaces?

Edit: J'ai créé un exemple de projet d'authentification Redux qui se produit également pour illustrer Redux universel et la mise à jour en temps réel avec Redux, Socket.io et RethinkDB.

reactjsfluxreactjs-fluxredux
17
hoodsy

De la discussion ici, il semble que l'état des réducteurs Redux devrait être conservé dans une base de données.

Pour maintenir l'état ou non, ce n'est probablement pas du tout une préoccupation de Redux. Cela dépend davantage de la logique d'application.

Si quelque chose se produit dans une application, comme le téléchargement de données sur le serveur, vous devez évidemment enregistrer l'état (ou une tranche de l'état sur un serveur).

Puisque les appels réseau sont asynchrones, mais Redux est synchrone - vous devez introduire un middleware supplémentaire, comme redux-thunk ou redux-promise .

À titre d'exemple d'inscription, vous aurez probablement besoin de ces actions,

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

Une partie de l'état, par ex. l'objet utilisateur après autorisation peut être stocké dans localStore et réhydraté lors de la prochaine exécution de l'application.

28
Alexander Beletsky

Ce sont des préoccupations valables. Utiliser localStorage pour conserver l'état sur le frontend pourrait être une meilleure stratégie. Vous pouvez l'implémenter en utilisant un middleware, par exemple:

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

Si vous craignez que l'ennemi accède à l'ordinateur portable de l'utilisateur et vole ses informations d'identification, vous pouvez conserver l'état du backend lorsque l'utilisateur quitte la page (Navigator.sendBeacon() peut être utile ici) et le stocker dans la session.

8
Ashton War