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

我明白

Uncaught TypeError: Cannot read property 'route' of undefined

Answer 1

您没有使用连接的组件。

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

试试这个；

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

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