2

誰かが独自のコンポーネントを追加できる動的グリッドの状態管理に redux を使用しています。グリッドhttps://github.com/STRML/react-grid-layoutにこのライブラリを使用しています。

グリッドとそのコンポーネントの現在の状態をユーザープロファイルに保存および複製するための永続レイヤーとして Gun を使用したいと考えています。私のアプリは今のところ Express.js を使用していないため、すべてのサンプルが Express を使用しているため、サンプルの実行に問題があります。私もreact-gunを使用していますが、Redux Store ProviderでGun Providerをセットアップする方法を理解できませんでした

ReactにReduxでGunを使用する標準的な方法/例はありますか?

私はこれを試しました

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Gun from 'gun';
import { GunProvider } from 'react-gun';
import App from './App';
import configureStore from './redux/store/configureStore';
import * as serviceWorker from './serviceWorker';

const gun = Gun({ file: 'db' });

ReactDOM.render(
  <GunProvider gun={gun}>
    <Provider store={configureStore()}>
      <App />
    </Provider>
  </GunProvider>,
  document.getElementById('root')
);
serviceWorker.unregister();

この

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Gun from 'gun';
import { GunProvider } from 'react-gun';
import App from './App';
import configureStore from './redux/store/configureStore';
import * as serviceWorker from './serviceWorker';

const gun = Gun({ file: 'db' });

ReactDOM.render(

  <Provider store={configureStore()}>
    <GunProvider gun={gun}>
      <App />
    </GunProvider>
  </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

アプリのビルドまたは実行にエラーは表示されません

コンソールログ開始

[HMR] Waiting for update signal from WDS...
gun.js:863 Hello wonderful person! :) Thanks for using GUN, feel free to ask for help on https://gitter.im/amark/gun and ask StackOverflow questions tagged with 'gun'!

上記のコードで記録した「データ」変数を示すコンソール ログ

data: Gun
_:
$: Gun {_: {…}}
ack: 1
back: {gun: Gun, $: Gun, opt: {…}, root: {…}, graph: {…}, …}
get: "data"
gun: Gun {_: {…}}
id: 79
on: ƒ onto(tag, arg, as)
put: undefined
root: {gun: Gun, $: Gun, opt: {…}, root: {…}, graph: {…}, …}
soul: "data"
tag: {in: {…}, out: {…}}
__proto__: Object
__proto__: Object

しかし、Chrome >> アプリケーションタブ >> ローカルストレージに何も表示されません

これはyarn buildログに表示されますが、関連しているかどうかはわかりません

WARNING in ../node_modules/gun/gun.js 10:16-28
Critical dependency: the request of a dependency is an expression
 @ ./index.jsx

プロジェクトpackage.jsonをビルド/実行するために糸を使用する方法は次のとおりです

  "scripts": {
    "start": "cross-env-shell NODE_ENV=development node --max-old-space-size=12288 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --open",
    "build": "cross-env-shell NODE_ENV=production node --max_old_space_size=12288 node_modules/webpack/bin/webpack.js --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

コンポーネントでガンを使用する方法は次のとおりです

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { withGun } from 'react-gun';
import Logger from '../appLogger/logger';

const log = new Logger({
  childType: 'component',
  childName: 'Foo'
});


class Foo extends Component {
  static propTypes = {
    blah: PropTypes.string.isRequired
  };
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const data = this.props.gun.get('data').once(() => {});
    log.debug({
      msg: '[component] [componentDidMount] MainLayout',
      methodType: 'componentDidMount',
      logObjectName: 'data',
      logObject: data
    });
  }

  render() {
    const { blah } = this.props;
    return (
      <div>
        {blah}
      </div>
    );
  }
}

export default withGun(Foo);

予想された結果 -

「gun」というエントリが表示されるはずです Chrome DevTools >> Application タブ >> Local Storage

実績 -

Chrome Chrome DevTools >> Application タブ >> Local Storage に何も表示されない

4

1 に答える 1