无法将React Route内的组件连接到redux存储

Question

我正在尝试将放置在路由内的组件连接到 redux 存储，但没有成功。运行程序会抛出错误：

TypeError: props.setIsLoggedIn is not a function

将商店连接到路线之外的组件（例如菜单栏）可以正常工作。

包含路线的文件的重要部分：

<ThemeProvider theme={Theme}>
          <Provider store = {store}>
            <Router>
              <div  className = {classes.pageLayout}>
                <TopBar />
                <MenuBar />
                <Switch>
                    <Route exact  path ="/" 
                                component={<Home/>}/>
                    <Route exact  path ="/home" 
                                component={<Home/>}/>
                    <Route exact path ="/login"  
                                component= {<LoginPage/>}/>
                </Switch>
            </div>
          </Router>
        </Provider>
</ThemeProvider>

LoginPage 文件的重要部分：

import { connect } from "react-redux";

const setIsLoggedIn = isLoggedIn => ({
  type: "SET_IS_LOGGED_IN",
  isLoggedIn: isLoggedIn
});

const LoginForm = (props) => {
  props.setIsLoggedIn(true);
  return (<div>Contains some components.</div>);
}

const mapDispatchToProps = {
  setIsLoggedIn
};

export default connect(null, mapDispatchToProps)(LoginPage);

Answer 1

redux

connect

的东西在这里一切都很好 -

LoginPage

将具有

setIsLoggedIn

道具 - 您没有显示

LoginPage

的代码，但很可能您只是没有将该道具传递给

LoginForm

？

即

const LoginPage = (props) => (
  ...
  <LoginForm 
    setIsLoggedIn={props.setIsLoggedIn} 
    ...
  />
  ...
)