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 }
              }}/>

      )} />
   )};

请注意，我最终访问了商店对象...在商店...这是将动态属性作为单个包传递的产物。

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

store.getState is not a function even though it's on the object

reactjs

redux

react-redux

react-router-v4