Javascript 如何在react redux应用程序中打开和关闭内联对话框

我有一个使用react state的内联对话框。工作代码如下

import React，{PureComponent}来自'React'；
从'react dom'导入{render}；
从“道具类型”导入道具类型；
从“@atlaskit/Button”导入按钮；
从“@atlaskit/inline dialog”导入inline dialog；
常量样式={
fontFamily:'无衬线'，
textAlign:'中心'，
};
类按钮ActivatedDialog扩展了PureComponent{
静态类型={
内容：PropTypes.node，
位置：PropTypes.string，
}
状态={
伊索彭：错，
};
handleClick=（）=>{
这是我的国家({
isOpen:！this.state.isOpen，
});
}
handleOnClose=（数据）=>{
这是我的国家({
isOpen:data.isOpen，
});
}
render（）{
返回(
按钮
);
}
}
常量应用=（）=>(
);
render（，document.getElementById（'root'））好的，所以首先您必须设置redux状态。我们通常根据此处的模式执行此操作：

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


操作：在状态下执行任务（如打开或关闭内嵌菜单）
选择器：获取一些状态值（比如内联菜单打开了吗？）
操作：对状态执行操作（如将isOpen设置为true/false）
Reducer：对状态应用操作（如上面的操作）
类型：任何类型的状态更改。任何动作都有一个类型，该类型决定执行减速器中的哪个部分

因此，在您的示例中，我将创建一个state/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
};

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

import React，{PureComponent}来自'React'；
从'react dom'导入{render}；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
从“@myKitkit/Button”导入按钮；
从“@mykit/inline dialog”导入inline dialog；
从“../path/to/state/inlineMenu”导入{inlineMenuOperations，inlineMenuOperations}；
常量样式={
fontFamily:'无衬线'，
textAlign:'中心'，
};
类按钮ActivatedDialog扩展了PureComponent{
静态类型={
内容：PropTypes.node，
位置：PropTypes.string，
toggleState:PropTypes.func.isRequired
}
handleClick=（）=>{
const{toggleState}=this.props；
//这将分派切换状态操作
切换状态（）；
}
handleOnClose=（）=>{
const{toggleState}=this.props；
//这将分派切换状态操作
切换状态（）；
}
render（）{
返回(
按钮
);
}
}
//您需要在此处添加提供程序，这在redux文档中有描述。
常量应用=（）=>(
);
常量mapStateToProps=状态=>({
isOpen：内联菜单选择器。isOpen（状态）；
});
const mapDispatchToProps=调度=>({
toggleState:（）=>分派（inlineMenuOperations.toggleState（））
}
const ConnectedApp=connect（mapStateToProps、mapDispatchToProps）；
render（，document.getElementById（'root'））；
今晚将试一试。写得简洁明了，+1