swagger-api / swagger-api/swagger-ui

Swagger ui: React + Redux doesn't work properly

Open
#7,987 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Q&A (please complete the following information)
  • OS: macOS
  • Browser: chrome
  • Version: 100.0.4896.88
  • Method of installation: npm
  • Swagger-UI version: 4.10.3
  • Swagger/OpenAPI version: OpenAPI 3.0
Content & configuration

Swagger-UI configuration options:


const LayoutPlugin = () => {
    return {
        components: {
            App,
            Layout,
            OperationsMenu,
            Operations,
            operation: Operation,
            Response,
            AuthSwaggerContainer,
            ParameterContainer
        }
    };
};

<SwaggerUIReact
            url="url"
            plugins={[LayoutPlugin]}
        />
Describe the bug you're encountering

I have a big App with own redux store. And in one of pages I created swagger ui..
Inside on of plugins I use additional controller, which connected to global app's store and dispatch actions from server (get additional info). It is works correctly with version 3.52.5. After update in my additional controller I can't make api call and cant get general app's store. Redux store now only from swagger ui system.

To reproduce...

Steps to reproduce the behavior:
Create independent controller in on of plugins. For example:

export class PBLayout extends Component<Props, State> {
   render () {
         const AuthSwaggerContainer = getComponent('AuthSwaggerContainer', true);
         
         return (
                   <AdditionalApiController>
                        {( activeKey) => <AuthSwaggerContainer activeKey={activeKey}/>}
                    </AdditionalApiController>
         )
   }
}

class AdditionalApiController extends Component<Props> {
    componentDidMount() {
      // getActiveKeys - its call api action. It doesn't work.
        this.props.getActiveKeys();
    }

    render() {
        return this.props.children(this.props.activeKey);
    }
}

// How can I connect to app's store?
const mapStateToProps: MapStateToProps<OwnProps, StateProps> = state => ({
   // it doesn't work. Because state here is from swagger ui system. Not my own.
    activeKey: state.myOwnApp.tabWithSwagger.activekey
});

export default connect(mapStateToProps, {getActiveKeys})(AdditionalApiController);
Expected behavior

Can connect to general app store as in swagger-ui: 3.52.5 version

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the SwaggerUIReact integration, the LayoutPlugin example, and AdditionalApiController's connect/mapStateToProps usage. Compare how the app store is accessed in Swagger UI 3.52.5 versus 4.10.3, then verify that the controller can read the app's activeKey and dispatch getActiveKeys without losing the Swagger UI store.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, redux
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.