リアクションレスキューアプリでインラインダイアログを開く方法と閉じる方法

Question

私は反応状態を使って作業中のインラインダイアログを持っています。作業コードは以下の通りです。

import React, { PureComponent } from 'react'; 
 
import { render } from 'react-dom'; 
 
import PropTypes from 'prop-types'; 
 
import Button from '@atlaskit/button'; 
 
import InlineDialog from '@atlaskit/inline-dialog'; 
 

 
const styles = { 
 
    fontFamily: 'sans-serif', 
 
    textAlign: 'center', 
 
}; 
 

 
class ButtonActivatedDialog extends PureComponent { 
 

 
    
 
    static propTypes = { 
 
    content: PropTypes.node, 
 
    position: PropTypes.string, 
 
    } 
 

 
    state = { 
 
    isOpen: false, 
 
    }; 
 

 
    handleClick =() => { 
 
    this.setState({ 
 
     isOpen: !this.state.isOpen, 
 
    }); 
 
    } 
 

 
    handleOnClose = (data) => { 
 
    this.setState({ 
 
     isOpen: data.isOpen, 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <InlineDialog 
 
     content={this.props.content} 
 
     position={this.props.position} 
 
     isOpen={this.state.isOpen} 
 
     onClose={this.handleOnClose} 
 
     > 
 
     <Button 
 
      onClick={this.handleClick} 
 
      isSelected 
 
     > 
 
     The Button 
 
     </Button> 
 
     </InlineDialog> 
 
    ); 
 
    } 
 
} 
 

 
const App =() => (
 
    <ButtonActivatedDialog 
 
     content={ 
 
     <div> 
 
      <h5> 
 
      Displaying... 
 
      </h5> 
 
      <p> 
 
      Here is the information I need to display. 
 
      </p> 
 
     </div>} 
 
     position='bottom right' 
 
    /> 
 
); 
 

 
render(<App />, document.getElementById('root'));

私はボタンと同じ動作を持っているが、Reduxのを使用すると、ダイアログの状態を維持したいと思います。

いくつかの資料を読んだ後、私は、減速器の魔法使いをアクティブにするアクションをディスパッチして、ダイアログの状態を更新するのに役立つと信じています。しかし、私はこれをどのようにまとめるべきかを完全に理解しているとは思わない。

私の仕事は進歩していますが、何らかの理由で私のコードサンボックスは私がストアを作成しているフォーマットが嫌いです。

mport React, { PureComponent } from 'react'; 
 
import { render } from 'react-dom'; 
 
import PropTypes from 'prop-types'; 
 
import Button from '@atlaskit/button'; 
 
import InlineDialog from '@atlaskit/inline-dialog'; 
 

 
import { connect, createStore } from 'react-redux' 
 

 
const styles = { 
 
    fontFamily: 'sans-serif', 
 
    textAlign: 'center', 
 
}; 
 

 

 
const mapStateToProps = state => { 
 
    return { 
 
    isDialogOpen: false, 
 
    } 
 
} 
 

 
const mapDispatchToProps = dispatch => { 
 
    return { 
 
    toggleDialog:() => dispatch({ 
 
     type: 'TOGGLE_DIALOG' 
 
    }) 
 
    } 
 
} 
 

 

 
// action: 
 
const tottleDialog = 'TOGGLE_DIALOG'; 
 

 
//action creator 
 
const toggleDialog = (e) => ({ 
 
    type: 'TOGGLE_DIALOG', 
 
    e, 
 
}) 
 

 
class ButtonActivatedDialog extends PureComponent { 
 

 
    
 
    static propTypes = { 
 
    content: PropTypes.node, 
 
    position: PropTypes.string, 
 
    } 
 

 
    state = { 
 
    isOpen: false, 
 
    }; 
 

 
    handleClick =() => { 
 
    this.setState({ 
 
     isOpen: !this.state.isOpen, 
 
    }); 
 
    } 
 

 
    handleOnClose = (data) => { 
 
    this.setState({ 
 
     isOpen: data.isOpen, 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <InlineDialog 
 
     content={this.props.content} 
 
     position={this.props.position} 
 
     isOpen={this.state.isOpen} 
 
     onClose={this.handleOnClose} 
 
     > 
 
     <Button 
 
      onClick={this.handleClick} 
 
      isSelected 
 
     > 
 
     The Button 
 
     </Button> 
 
     </InlineDialog> 
 
    ); 
 
    } 
 
} 
 

 
const App =() => (
 
    <ButtonActivatedDialog 
 
     content={ 
 
     <div> 
 
      <h5> 
 
      Displaying... 
 
      </h5> 
 
      <p> 
 
      Info here 
 
      </p> 
 
     </div>} 
 
     position='bottom right' 
 
    /> 
 
); 
 

 
const store = createStore(toggleDialog, {}) 
 

 

 

 
//need and action 
 
//need an action creator - a function that returns an action: 
 

 

 
// 
 
// render(<App />, document.getElementById('root')); 
 

 
render(
 
    <Provider store={store}> 
 
    <App /> 
 
    </Provider>, document.getElementById('root') 
 
);

Answer 1

[OK]を、あなたのReduxの状態を設定する必要が最初のようにします。私たちは通常、ここでの再鴨のパターンに従ってこれを行います：https://github.com/alexnm/re-ducks

これは、アプリケーションの "部品"ごとにディレクトリを作成することを意味します。

• 操作：
• セレクターを（のようなあなたのインラインメニューを開いたり、閉じた）状態でタスクを実行するには、次の各パーツは、その後持っている状態のいくつかの値を取得するには（のようなインラインメニューが開いていますか？ ）
• アクション：状態に対してアクションを実行するには（真/偽にISOPENセットなど）
• リデューサー：状態にアクションを適用するには（上から1のような）
• タイプ：状態の任意のタイプ変化する。アクションにはタイプがあり、タイプによって減速機のどの部分が実行されるかが決まります。

だからあなたの例では、私は状態/ inlineMenuフォルダを作成し、その内側になり、次のファイル：

actions.js：

import types from './types'; 

const toggleState = { 
    type: types.TOGGLE_STATE 
}; 

export default { 
    updateMenuState 
} 

operations.js：

import actions from './actions'; 

const toggleState = actions.toggleState; 

export default { 
    updateMenuState 
}; 

還元剤.js：

selectors.js：

const isMenuOpen = state => state.inlineMenu.isOpen; 

export default { 
    isMenuOpen 
}; 

types.js：

const TOGGLE_STATE = 'inlineMenu/TOGGLE_STATE'; 

export default { 
    TOGGLE_STATE 
}; 

index.js：

import reducer from './reducers'; 

export { default as inlineMenuSelectors } from './selectors'; 
export { default as inlineMenuOperations } from './operations'; 

export default reducer; 

ます。また、デフォルトのプロバイダを設定する必要があります。セレクタのisOpenプロパティへのパスは、おそらく調整する必要があります。

これで、グローバルな還元状態が設定されました。

ビュー内のデータを取得する必要があります。このためには、操作とセレクタを受け取り、それらをデフォルトの反応小道具にマッピングするために、reduxのconnect関数を使用する必要があります。

だからあなたの連結成分は、次のようになります。

import React, { PureComponent } from 'react'; 
import { render } from 'react-dom'; 
import { connect } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import Button from '@myKitkit/button'; 
import InlineDialog from '@mykit/inline-dialog'; 
import { inlineMenuOperations, inlineMenuOperations } from '../path/to/state/inlineMenu'; 

const styles = { 
    fontFamily: 'sans-serif', 
    textAlign: 'center', 
}; 

class ButtonActivatedDialog extends PureComponent { 

    static propTypes = { 
    content: PropTypes.node, 
    position: PropTypes.string, 
    toggleState: PropTypes.func.isRequired 
    } 

    handleClick =() => { 
    const { toggleState } = this.props; 

    // This will dispatch the TOGGLE_STATE action 
    toggleState(); 
    } 

    handleOnClose =() => { 
    const { toggleState } = this.props; 

    // This will dispatch the TOGGLE_STATE action 
    toggleState(); 
    } 

    render() { 
    return (
     <InlineDialog 
     content={this.props.content} 
     position={this.props.position} 
     isOpen={this.props.isOpen} 
     onClose={this.handleOnClose} 
     > 
     <Button 
      onClick={this.handleClick} 
      isSelected 
     > 
     The Button 
     </Button> 
     </InlineDialog> 
    ); 
    } 
} 

// You need to add the provider here, this is described in the redux documentation. 
const App =() => (
    <ButtonActivatedDialog 
     content={ 
     <div> 
      <h5> 
      Displaying... 
      </h5> 
      <p> 
      Here is the information I need to display. 
      </p> 
     </div>} 
     position='bottom right' 
    /> 
); 

const mapStateToProps = state => ({ 
    isOpen: inlineMenuSelectors.isOpen(state); 
}); 

const mapDispatchToProps = dispatch => ({ 
    toggleState:() => dispatch(inlineMenuOperations.toggleState()) 
} 

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps); 

render(<ConnectedApp />, document.getElementById('root'));