内部の独立したReduxストアを持つリジューム可能なコンポーネント

Question

Reactでかなり複雑なチャートコンポーネントを構築することを考えています。言うまでもなく、そのようなコンポーネントには、何とかして管理する必要のある多数の状態があります。

Reduxはこれに最適だと思われますが、プロバイダのトップレベルのコンテナをカスタムストアでラップすると、コンポーネントの内部のreduxストアはグローバルなアプリケーションの状態に干渉しませんより大きなReact/Reduxアプリに含まれていますか？

import React, { Component } from 'react'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import internalReducer from './reducer'; 

export default class MyReduxComponent extends Component { 

    render() { 
     const store = createStore(internalReducer, this.props.initialState); 
     return <Provider store={store}> 
      <Chart /> 
     </Provider> 
    } 

} 

Answer 1

あなただけ使用していない理由は、コンポーネントの状態が反応しますか？ Reduxは、アプリケーション全体で複数のコンポーネントがアクセスできる必要がある状態で使用するためのものです。特定のコンポーネントの子孫によって使用されることだけを意味する状態を管理している場合、コンポーネント状態を使用することもできます。その場合、Reduxは必要ありません。あなたのコンポーネントは、そうした方法ではるかに再利用可能になり、追加の依存関係に依存しません。

Answer 2

あなたのコンポーネントは、独自の内部Reduxの店舗を持っているのではなく、減速機が知っている、それは簡単に既存のReduxのアプリと統合することができ、独自の減速+アクション/アクションクリエイターを持つべきではありません。

import { chartReducer, chartActionCreators } from 'your-chart' 

combineReducers({ 
    ...global.stuff, 
    chartReducer 
}) 

store.dispatch(chartActionCreators.action()) 

-- 

import Chart from 'your-chart' 

export default() => 
    <div> 
    <Chart /> 
    </div> 

あなたのライブラリのユーザーは、何らかのアクションを明示的に使用する必要はありません。リデューサーだけで十分である必要があります。そのため、チャートの状態にはアプリ内のどこでもアクセスできます。

さらに、何らかの方法でアクション呼び出しを増やす必要がある場合は、ミドルウェアを書くことができます。

http://redux.js.org/docs/advanced/Middleware.html

Answer 3

私はこの問題を解決するためには、childContextTypesとsetStateを最上位コンポーネントに使用して、非常に良い方法を見つけたと思います。これにより、深度のあるサブコンポーネントは必要なコンテキストアクションを「インポート」できます。 （複数のネストされたコンポーネントを介して小道具としてコールバックを渡す必要性を排除します）。

Example on JSBin

トップコンポーネントは、この

export default class ReusableComponent extends Component { 

    // Define the public API interface to child components 
    static childContextTypes = { 
    // expose component state store 
    store: PropTypes.object, 
    // actions 
    setFoo: PropTypes.func, 
    setBar: PropTypes.func 
    }; 

    // Set initial state, can be overriden by props 
    constructor(props) { 
    super(props) 
    this.state = { 
     foo: 'My Foo', 
     ...props 
    } 
    } 

    // Define methods for public API 
    getChildContext() { 
    return { 
     store: this.state, 
     setFoo: this.setFoo.bind(this), 
     setBar: this.setBar.bind(this) 
    }; 
    } 

    // Reducer for action setFoo 
    setFoo(foo) { 
    this.setState({ foo }) 
    } 

    // Just render components, no need for passing props 
    render() { 
    return <div> 
     <UpdateFooComponent /> 
     </div> 
    } 

} 

と子コンポーネント

class UpdateFooComponent extends Component { 

    // 'import' the store and actions you need from top component 
    static contextTypes = { 
    store: PropTypes.object, 
    setFoo: PropTypes.func 
    }; 

    clickHandler(e) { 
    this.context.setFoo('Hello from subcomponent'); 
    } 

    render() { 
    const { foo } = this.context.store; 
    return <div> 
     <button onClick={::this.clickHandler}>Update foo</button> 
     <p><strong>foo:</strong> {foo}</p> 
    </div> 
    } 

}