web-dev-qa-db-ja.com

React Reduxは接続されたコンポーネントでHOCを使用

私は最初のReact= Nativeプロジェクトです。APIからのデータの同期のみを扱うHOCを作成したいと思います。これは他のすべてのコンポーネントをラップします。

正しい場合、DataSyncコンポーネントはexportステートメントで次の操作を行うことで他のすべてのコンポーネントを強化します。

export default DataSync(SomeOtherComponent);

私が苦労している概念は、SomeOtherComponentもReact他のredux状態を取得するためのRedux Connectメソッドに依存しているということです。 ？

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

私はここで概念を完全に誤解したかもしれないので、いくつかのポインタを本当に感謝します

編集

さらに説明するには：

My DataSync HOCは、アプリ間のデータの同期を純粋に処理し、トップレベルのコンポーネントになります。認証状態にアクセスする必要があり、他のすべてのコンポーネントに対してReduxでデータを設定します（この場合は注文）。

DataSync HOC内にネストされたコンポーネントは、取得したデータ、ルートにアクセスする必要があり、それらは、サーバーに定期的に同期する必要がある状態（順序）を作成します。

javascriptreactjsreact-nativereduxreact-redux
11
mtwallet

これがあなたの望んだものかもしれません：

DataSync.js

export default connect(mapStateToProps, mapDispatchToProps)(DataSync);

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

子コンポーネントでもconnectを使用します。 [〜＃〜] why [〜＃〜]

11
Yadhu Kiran

以下に簡単な例を示します

const AppWrapper = MainComponent =>
  class extends Component{
    componentWillmount(){
      this.props.fetchSomething()
    }
    componentDidUnmount(){
      this.props.Push('/')
    }
    render(){
      return (
        <div>
          {this.props.fetchedUsers === 'undefined' ? 
            <div> Do something while users are not fetched </div> :
            <MainComponent {...this.props}/>}
        </div>
      )
    }
  }



const App = ({users}) => {
  // just example, you can do whatever you want
  return <div>{JSON.stringify(users)}</div>
};

// mapStateToProps will be in HOC -> Wrapper
// mapDispatchToProps will be in HOC -> Wrapper

/* you may use DataSync as you want*/
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App))

便利な HOC リンク

12
The Reason

はい、connectはHOCでもあり、HOCはコンポーネントを返すため、任意にネストできます。

HOC(HOC(...(Component)...))は問題ありません。

ただし、DataSyncもstate/propsにアクセスできるように、connect(...)(DataSync(YourComponent))ではなくDataSync(connect(...)(YourComponent))が必要だと思います必要です。本当にユースケースに依存します。

5
Lyubomir

私は@The Reasonが言及したのと同じアプローチを使用し、気に入っています。ここでの唯一の問題は、アクションをマップする場合、dispatch（）が利用できないことです。

誰かが同じ問題に直面している場合に私がそれを機能させる方法は次のとおりでした。

_const ConnectedComponentWithActions = connect(
  () => { return {}; },
  { myAction },
)(ViewComponent);

export default connect(
  state => state,
  null,
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions));
_

withPreFetch(firstLoadAction, ConnectedComponentWithActions)は、ディスパッチされるアクションを受け入れるHOCです。

0
Thiago C. S Ventura