store.getState不是一个函数，即使它在对象上

Question

所以我知道其他人也提出了类似的问题，但案件有点不同。我正在尝试检查用户在访问私有路由时是否已经过身份验证，并且我已经设置了我的私有路由包装器，如下所示：

export const PrivateRoute = ({ component: Component, store: store, ...rest }: { component: any, store: Store<ApplicationState>, path: any }) => (
      <Route {...rest} render={(props:ReduxRouteComponentProps) => (
         store.getState().authenticationState.authenticated ? (
            <Component {...props}/>
         ) : (
            <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
            }}/>
         )
      )}/>
);

PrivateRoute将从根组件中作为prop传递的商店。

调试时，我收到store.getState is not a function错误，但当将鼠标悬停在商店参数上时，我发现至少Chrome调试器认为是错误的。

到底是怎么回事？

编辑：PrivateRoute用法

我被要求显示私人路线的使用位置 - 这里有一些片段：

// Navigation Frame

    export class NavigationFrame extends React.Component<INavigationFrameProps, {}> {
        render() {
            console.log(this)
            return <Router>
                      <div className="navigation-frame">
                      <Route exact path="/" component={Splash}/>
                      <Route exact path="/register" component={RegistrationForm}/>
                      <Route path="/signin" component={SignInContainer}/>
                      <PrivateRoute store={this.props.store} path="/i" component={AuthenticatedView}/>
                      </div>
                   </Router>;
        }
    }

和提供者标签......

// main.tsx

ReactDOM.render(
    <Provider store={store}>
        <App name="my-app" />
    </Provider>,
    document.getElementById("react-app")
);

编辑：问我为什么不把商店映射到道具......

你是说这样的意思吗？以下内容引发错误，说PrivateRoute是connect

的不兼容类型

let getAuthState = (state: AuthenticationState) => {
   return state;
 }

 const mapDispatchToProps = (dispatch:any) => {
    return {}
 }

 const mapStateToProps = (state: ApplicationState) => {
   return {
     authState: getAuthState(state.authenticationState)
   }
 }

 export const PrivateRouteContainer = connect(
   mapStateToProps,
   mapDispatchToProps
 )(PrivateRoute);

Answer 1

主。我想通了：这可行：

export const PrivateRoute = ({ component: Component, ...rest }: { component: any, store: {store:Store<ApplicationState>}, path: any }) => {
   return(rest.store.store.getState().authenticationState.authenticated ?
      <Route {...rest}
        render={(props:any) => (
            <Component {...props}/>
         )} /> : <Route {...rest}
        render={(props: any) => (
            <Redirect to={{
              pathname: '/signin',
              state: { from: props.location }
              }}/>

      )} />
   )};

注意我最终访问商店上的商店对象......这是将动态属性作为单个包传递的工件。