如何通过身份验证将Redux添加到React应用？

Question

我在我的React应用程序中添加了MSAL支持。但是现在我想添加Redux用于状态管理。看来我必须用AuthProvider组件以及Redux Provider组件包装应用程序。我对AuthProvider如何定义其默认导出的语法不熟悉。因此，当我尝试调用commbine时，似乎无法以可访问合并的方式定义AuthProvider。如何构造我的代码，以便我能同时完成这两项工作？

下面是我当前的代码，为简洁起见，删除了一些详细信息。

Index.js

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

App.js

import AuthProvider from "./AuthProvider";

function App(props) {
  return (
    <div className="App">
      <React.Fragment>
        <Router>
          <NavigationMenu
            isAuthenticated={props.isAuthenticated}
            authButtonMethod={props.isAuthenticated ? props.onSignOut.bind(this) : props.onSignIn.bind(this)}
            user={props.account} />
          <Container>
            <Switch>
              <Route exact path="/" isAuthenticated={props.isAuthenticated} render={(props) => <Home {...props} isAuthenticated={props.isAuthenticated} />} />
              <ProtectedRoute path="/configuration" component={Configuration} isAuthenticated={props.isAuthenticated}></ProtectedRoute>
              <ProtectedRoute path="/otherComponent" component={OtherComponent} isAuthenticated={props.isAuthenticated}></ProtectedRoute>
            </Switch>
          </Container>
        </Router>
      </React.Fragment>
    </div>
  );
}

export default AuthProvider(App);

AuthProvider.js

export default AuthComponent =>
    class AuthProvider extends Component {
        // lots of code skipped here
        render() {
            return (
                <Provider store={store}>
                    <AuthComponent
                        {...this.props}
                        account={this.props.account}
                        isAuthenticated={this.props.isAuthenticated}
                        error={this.props.error}
                        graphProfile={this.props.graphProfile}
                        onSignIn={() => this.onSignIn(useRedirectFlow)}
                        onSignOut={() => this.onSignOut()}
                    />
                </Provider>
            );
        }
    };

const mapStateToProps = (state) => {
    return {
        auth: state.authReducer
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        setError: (error) => {
            dispatch(setError(error));
        },
        setAuth: (account) => {
            dispatch(setAuth(account));
        },
        setGraphProfile: (graphProfile) => {
            dispatch(setGraphProfile(graphProfile));
        }
    }
};

connect(mapStateToProps, mapDispatchToProps)(AuthProvider); // <-- This is the line that breaks

Answer 1

这根本不是您在React项目中设置身份验证的方式。使用https://reactjs.org/docs/create-a-new-react-app.html#create-react-app查看React项目的结构。试试这个：

class AuthProvider extends Component {
    // lots of code skipped here
    render() {
        return (
                <AuthComponent
                    {...this.props}
                    account={this.props.account}
                    isAuthenticated={this.props.isAuthenticated}
                    error={this.props.error}
                    graphProfile={this.props.graphProfile}
                    onSignIn={() => this.onSignIn(useRedirectFlow)}
                    onSignOut={() => this.onSignOut()}
                />
        );
    }
};
const mapStateToProps = (state) => {
return {
    auth: state.authReducer
}
};

const mapDispatchToProps = (dispatch) => {
return {
    setError: (error) => {
        dispatch(setError(error));
    },
    setAuth: (account) => {
        dispatch(setAuth(account));
    },
    setGraphProfile: (graphProfile) => {
        dispatch(setGraphProfile(graphProfile));
    }
}
};

 export default connect(mapStateToProps, mapDispatchToProps)(AuthProvider);

Provider store = {store}需要包装您的根组件，而不是AuthProvider。阅读此https://reacttraining.com/react-router/web/guides/quick-start和Redux文档。