connected - reactjs redux

Persistencia de estado de Redux con una base de datos

Question

A partir de la discusión aquí , parece que el estado de los reductores de Redux debería persistir en una base de datos.

¿Cómo funciona algo así como la autenticación de usuario en esta instancia?

¿No se crearía un nuevo objeto de estado para reemplazar el estado anterior en la base de datos para cada usuario (y su estado de aplicación) creado y editado?

¿El uso de todos estos datos en la interfaz y la actualización constante del estado en la base de datos sería un rendimiento?

Editar: he creado un ejemplo de proyecto de autenticación de Redux que también ejemplifica el redux universal y la actualización en tiempo real con Redux, Socket.io y RethinkDB.

Answer 1

A partir de la discusión aquí, parece que el estado de los reductores de Redux debería persistir en una base de datos.

Para persistir en el estado o no, probablemente no sea una preocupación de Redux. Está más relacionado con la lógica de la aplicación.

Si sucede algo en una aplicación, como la carga de datos al servidor, obviamente necesita guardar el estado (o un corte del estado en un servidor).

Dado que las llamadas de red son asíncronas, pero Redux es sincrónico, debe introducir middleware adicional, como redux-thunk o redux-promise .

Como ejemplo de registro, es probable que necesites esas acciones,

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

Alguna parte del estado, por ejemplo, el objeto de usuario después de la autorización, puede almacenarse en localStore y rehidratarse en la próxima ejecución de la aplicación.

Answer 2

Esas son preocupaciones válidas. Usar localStorage para localStorage estado en la interfaz podría ser una mejor estrategia. Puede implementar esto usando middleware, por ejemplo:

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 le preocupa que el enemigo acceda a la computadora portátil del usuario y le robe las credenciales, puede continuar con el estado cuando el usuario abandone la página ( Navigator.sendBeacon() podría ser útil aquí) y almacenarlo en la sesión.