如何将 Redux 添加到具有身份验证的 React 应用程序？答案

【问题标题】：How can I add Redux to a React app with Authentication?如何将 Redux 添加到具有身份验证的 React 应用程序？
【发布时间】：2020-03-24 15:57:08
【问题描述】：

我在我的 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

【问题讨论】：

标签： reactjs ecmascript-6 redux react-redux msal

【解决方案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 文档。

【讨论】：