如何在react redux应用程序

Question

我有一个使用反应状态的工作内联对话框。工作代码如下。

＆＃13;

＆＃13;

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'));

＆＃13;

＆＃13;

＆＃13;

我希望按钮具有相同的行为，但使用redux来维护对话框的状态。

在阅读了一些材料后，我相信我需要发出一个动作来激活一个减速器，这反过来会帮助我更新对话框的状态。但是，我不相信我完全理解这应该如何组合在一起。

这是我正在进行的工作但由于某种原因，我的codeSanbox不喜欢我创建商店的格式。

＆＃13;

＆＃13;

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')
);

＆＃13;

＆＃13;

＆＃13;