特定のreduxアクションが呼び出されたときに、すべてのエクスパンダを開く

Question

基本的には、誰かが投稿を開始したときにすべてのエクスパンダを開くことです。それはかなり簡単に聞こえるが、私が来た解決法はかなり醜い。アクションがディスパッチされると、それはエキスパンダーの状態をエキスパンダーを開く必要があるという信号コンポーネントに変更し、直ちにレデューサーの状態をリセットする別のアクションを呼び出します。私はredux観測を使用しているので、私は叙事詩の中でstartとendを呼ぶこともできます。しかし、このアプローチは非常に奇妙に思えますが、何らかのアクションを実行するようにコンポーネントに信号を送るより良い方法はありますか？私はここで問題は、追加の状態が必要ないないようであればコンポーネントは、アプリケーション固有のイベント/信号を観察持っているかと思い

class ExpanderWrapper : React.Component<any,any> 
{ 
    state = {expanded:false} 

    componentWillReceiveProps(newProps) 
    { 
     if(newProps.forceExpand) { 
     this.setState({expanded:true}); 
      this.props.forceExpandEnded(); 
     } 
    } 


    render() { 
     return(<Expander expanded={this.state.expanded} 
       onExpandChange={()=>this.setState({expanded:false)} /> 
    } 
} 


connect(ExpandWrapper,... map forceExpand and forceExpandEnded() here) 


reducer(state,action) 
{ 
    if(action === forceExpandStarted) 
    return {...state,forceExpand:true} 
    if(action === forceExpandEnded) 
    return {...state,forceExpand:false} 
} 

Answer 1

：これは、以下の私の擬似コードです。

あなたの解決策には、醜さが存在する可能性のあるアプリケーションの状態にforceExpand信号を追加することが含まれます。あなたは、その信号を取得するために状態ツリーにフックし、現在レンダリングされている<Expander>ごとにリセットする必要があります。

RxJSを還元的に観測することなく利用することもできます。このソリューションでは、を作成し、関連するアクションがレデックスストアにプッシュされるたびに発行します。次に、コンポーネントのObservableを購読し、購読を解除します。

迅速かつ汚い例：

// in some module 
export const ExpandSignal = new Rx.Subject(); 
export const ExpandSignalActionTypes = [ ... ]; 

// middleware that looks at the redux actions 
const signalMiddleware = store => next => action => { 
    if (ExpandSignalActionTypes.includes(action.type)) 
    ExpandSignal.next(); 

    return next(action); 
}; 

// implement with wrapper, or integrate into existing component 
class ExpandWrapper extends React.Component { 
    state = { expanded: false }; 

    componentDidMount() { 
    this.subscription = ExpandSignal.subscribe(() => this.setState({ expanded: true }); 
    } 

    componentWillUnmount() { 
    this.subscription.unsubscribe(); 
    } 

    render() { 
    return (
     <Expander expanded={this.state.expanded} 
       onExpandedChanged={() => this.setState({ expanded: false })} /> 
    ) 
    } 
}