Redux-react 连接功能不适用于根组件

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')
)

我明白了

未捕获的类型错误：无法读取未定义的属性“路由”

Answer 1

您没有使用连接的组件。

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

试试这个；

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

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