web-dev-qa-db-ja.com

非コンポーネントクラスをreduxストアに接続することは可能ですか？

したがって、私はApiClientヘルパーを備えたreact-reduxボイラープレートを使用しています。次のようになります。

export default class ApiClient {
  constructor(req) {
    /* eslint-disable no-return-assign */
    methods.forEach((method) =>
      this[method] = (path, withCredentials, { params, data } = {}) => new Promise((resolve, reject) => {

        const request = superagent[method](formatUrl(path))

        if (withCredentials) {
          console.log('first of all, its true')
          console.log(this)
        }

        if (params) {
          request.query(params)
        }

        if (__SERVER__ && req.get('cookie')) {
          request.set('cookie', req.get('cookie'))
        }

        if (data) {
          request.send(data)
        }

        request.end((err, { body } = {}) => {

          return err ? reject(body || err) : resolve(body)

        })
      }))
    /* eslint-enable no-return-assign */
  }
  /*
   * There's a V8 bug where, when using Babel, exporting classes with only
   * constructors sometimes fails. Until it's patched, this is a solution to
   * "ApiClient is not defined" from issue #14.
   * https://github.com/erikras/react-redux-universal-hot-example/issues/14
   *
   * Relevant Babel bug (but they claim it's V8): https://phabricator.babeljs.io/T2455
   *
   * Remove it at your own risk.
   */
  empty() {}
}

これを私の認証に接続して、次のように保護されたエンドポイントにヘッダーを付加できるようにします。

@connect(state => ({ jwt: state.auth.jwt }))
export default class ApiClient {
  ...

しかし、これを行うと、エラーが発生します：Cannot read property 'store' of undefined。何が起きてる？通常のクラスをreduxストアに接続できないのはなぜですか？

pdate： ApiClientヘルパーを使用する私のログイン関数は次のとおりです。

export function loginAndGetFullInto(email, password) {
  return dispatch => {
    return dispatch(login(email, password))
    .then(() => {
      return dispatch(loadUserWithAuth())
    })
  }
}

ストアまたはjwtをloadUserWithAuth関数に渡す方法が必要です...

reactjsecmascript-6reduxreact-routerreact-redux
15
j_d

connect関数は、Reactコンポーネント以外では機能しません。ストアインスタンスをクラスに渡して、store.dispatch、store.getState、およびstore.subscribeを直接呼び出すことができます。 。

サブスクライブする場合は、サブスクライブ解除する機能も必要です。そうしないと、ストアがクラスインスタンスへの参照を永久に保持し、メモリリークが発生します。

20
Jim Bolla