web-dev-qa-db-ja.com

データベースを使用したRedux状態の永続化

議論から こちら Reduxレデューサーの状態はデータベースに永続化されるべきだと思われます。

この場合、ユーザー認証のようなものはどのように機能しますか？

作成および編集されたすべてのユーザー（およびアプリケーションの状態）について、データベース内の以前の状態を置き換える新しい状態オブジェクトを作成しませんか？

このすべてのデータをフロントエンドで使用し、データベースの状態を常に更新するとパフォーマンスが向上しますか？

編集：私は Redux認証プロジェクトの例 を作成しました。 Socket.ioおよびRethinkDB。

reactjsfluxreactjs-fluxredux
17
hoodsy

ここでの議論から、Reduxレデューサーの状態はデータベースに保持する必要があるようです。

状態を維持するかどうかは、おそらく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に保存され、次のアプリケーションの実行時に再水和される可能性があります。

28
Alexander Beletsky

これらは有効な懸念事項です。 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()が役立つ場合があります）、セッションに保存できます。

8
Ashton War