如何在 React Redux 应用程序中打开和关闭内联对话框

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 来维护对话框的状态。

在阅读了一些材料后，我认为我需要发送一个动作，该动作将激活减速器女巫，从而帮助我更新对话框的状态。但是，我认为我并不完全理解应该如何组合。

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

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

好的，首先你必须设置你的 redux 状态。我们通常按照这里的 re-ducks 模式进行操作：https://github.com/alexnm/re-ducks

这意味着您将为应用程序的每个“部分”创建一个目录。然后每个部分都有一个：

• 操作：在状态上执行任务（例如打开或关闭内联菜单）
• 选择器：获取一些状态值（比如内联菜单是否打开？）
• 操作：对状态执行操作（如将 isOpen 设置为 true/false）
• Reducer：将动作应用于状态（如上面的那个）
• 类型：任何类型的状态变化。任何动作都有一个类型，类型决定了reducer中的哪个部分被执行。

因此，在您的示例中，我将创建一个 state/inlineMenu 文件夹并在其中包含以下文件：

actions.js：

import types from './types';

const toggleState = {
  type: types.TOGGLE_STATE
};

export default {
  updateMenuState
}

操作.js：

import actions from './actions';

const toggleState = actions.toggleState;

export default {
  updateMenuState
};

reducers.js：

import types from './types';

const initialState = {
  isOpen: false // closed per default
};

const inlineMenuReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.TOGGLE_STATE:
      return { ...state, isOpen: !state.isOpen }

    default:
      return state;
  }
};

export default inlineMenuReducer;

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 状态。

我们现在需要将其中的数据获取到视图中。为此，我们需要使用 redux 的 connect 函数，其中它将获取操作和选择器并将它们映射到默认的 react props。

因此您的连接组件可能如下所示：

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