Question

我正在使用中间件从indexeddb恢复Redux存储。我想在根组件中使用该数据进行路由，以检查用户是否已连接。但似乎connect函数没有将根组件state连接到Redux。

当我调试时，我看到mapStateToProps从未实际运行过。这是index.js的相关部分：

class AppProvider extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentWillMount () {
    persistStore(store, {storage: localforage}) // Populates the store from indexedDB
  }

  render () {
    return (
      <Provider store={store}>
        <Router history={history}> // Here I need the user from redux
          <Route path="/login" render={() => (
          this.state.user ? ( <Redirect to="/dashboard"/> ) : ( <LoginPage/> )
        )}/>
        </Router>
      </Provider>
    )
  }
}

function mapStateToProps (state, ownProps) {
  return {
    user: state.user // function never runs!
  }
}

withRouter(connect(mapStateToProps, {})(AppProvider))

render(
  <AppProvider/>,
  document.getElementById('root')
)

更新：在尝试这个时：

const Root = withRouter(connect(mapStateToProps, {})(AppProvider))

render(
  <Root/>,
  document.getElementById('root')
)

我得到了

未捕获的TypeError：无法读取未定义的属性“route”

Answer 1

您没有使用连接的组件。

withRouter和connect都不会修改原始组件。他们只是返回一个新组件。

试试这个;

const AppProviderWithRedux = withRouter(connect(mapStateToProps, {})(AppProvider))

render(
  <AppProviderWithRedux/>,
  document.getElementById('root')
)

Redux-react连接功能对根组件

1 个答案: