Redux和React-Router正确设置

费奥多尔·乌萨科夫(Fyodor Usakov)

我是Redux的新手。尝试在当前项目中进行设置。

import thunk from 'redux-thunk'
import * as reducers from './store/reducers'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(combineReducers(reducers), composeWithDevTools(
  applyMiddleware(thunk)
))

使用提供者的路由方案:

<Router history={browserHistory}>
    <Route path='/login' component={Login} />
    <Provider store={store}>
      <Route path='/' component={App} onEnter={auth}>
        <Route path='/token' component={Token} />
        <Route path='/engagement' component={Engagement} />
        <Route path='/clients' component={Clients} />
      </Route>
    </Provider>
</Router>

我在<Clients />组件中有一个基本的容器组件:

class Clients extends Component {
  render () {
    return (
      <div className='any-css' >
        <Row>
          <ClientsSubMenuContainer someId={13} />
        </Row>
      </div>
    )
  }
}

我正在尝试与商店建立联系:

class ClientsSubMenuContainer extends Component {
  render () {
    return <ClientsSubMenu {...this.props} />
  }
}
// which props do we want to inject, given the global store state?
function mapStateToProps (state) {
  return {
  }
}
export default connect(mapStateToProps)(ClientsSubMenuContainer)

而我目前得到的只是一个警告:

未捕获的错误:在“ Connect(ClientsSubMenuContainer)”的上下文或道具中找不到“存储”。可以将根组件包装在中,也可以将“存储”作为道具明确传递给“ Connect(ClientsSubMenuContainer)”。


如何正确设置此设置,以便所有组件(不包括登录名)都可以访问存储和所有redux功能?

1天后更新
,由于社区,我才发现问题的核心。index.js初级用户对任何gitFlow残酷地添加了另一段代码:)我没有注意到它,因为完全确定可以保存master分支,而无需进行任何更改。这段代码看起来像这样:

let router = (
   <Router history={browserHistory} onUpdate={onUpdate}>
     {Routes}
   </Router>
)
render(Routes, document.getElementById('app'))

所以最终结果是:

<Router history={browserHistory} onUpdate={onUpdate}>
  <Provider store={store}>
    <Router history={browserHistory}>
     <Route path='/login' component={Login} />
      <Route path='/' component={App} onEnter={auth}>
        <Route path='/token' component={Token} />
        <Route path='/engagement' component={Engagement} />
        <Route path='/clients' component={Clients} />
      </Route>
    </Router>
  </Provider>       
</Router>

和路由器工作正常。唯一的提示是redux警告,该警告在移除包装后消失了<Router />

调和他们

您可以尝试用提供程序包装所有组件吗?

<Provider store={store}>
  <Router history={browserHistory}>
    <Route path='/login' component={Login} />
      <Route path='/' component={App} onEnter={auth}>
        <Route path='/token' component={Token} />
        <Route path='/engagement' component={Engagement} />
        <Route path='/clients' component={Clients} />
      </Route>
   </Router>
</Provider>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用React,redux和react-redux-router登录验证:正确的方法是?

来自分类Dev

如何使用React正确设置react-router-dom链接

来自分类Dev

React和Redux:在Redux中存储加载状态的正确方法

来自分类Dev

React-Router-Redux和React-Bootstrap

来自分类Dev

React工具包和Redux-First-Router

来自分类Dev

使用 React Router 渲染组件和 Redux 崩溃

来自分类Dev

结合 React Router 和 Redux 使我的重定向 KO

来自分类Dev

react-router-redux和redux-immutable:您不能更改<Router history>;它会被忽略

来自分类Dev

React Router-正确设置useParams用于详细信息页面

来自分类Dev

在Angular2 Dart中设置Router和RouterLink的正确方法是什么

来自分类Dev

使用 React 和 Redux 设置 Antd 的菜单 defaultSelectedKeys 值

来自分类Dev

如何使用react-redux与mapStateToProps,MapDispatchToProps和Redux-Router连接

来自分类Dev

从通过React Router设置的路由访问Redux Store

来自分类Dev

React,Redux和React-Router服务器端渲染

来自分类Dev

使用react-router和requirejs进行React的基本设置

来自分类Dev

使用react-router和requirejs进行React的基本设置

来自分类Dev

使用React Router和Redux Simple Router进行onEnter转换不会渲染新路由的组件

来自分类Dev

带有 React.js 的 SSR(create-react-app、react-router v4、redux 和 sagas)

来自分类Dev

设置React Router链接的样式

来自分类Dev

无法设置React-Router

来自分类Dev

使用React-Router和Redux时单击链接时如何调度动作?

来自分类Dev

推荐使用Redux和React-Router进行深度链接的方法

来自分类Dev

使用react-router和redux时如何维护商店的状态?

来自分类Dev

登录后使用react-router-v5和redux-toolkit重定向页面

来自分类Dev

Redux-Persist和Connected-React-Router:TypeError:无法读取未定义的属性“位置”

来自分类Dev

使用react-router和redux容器组件对路由参数进行线程化

来自分类Dev

推荐使用Redux和React-Router进行深度链接的方法

来自分类Dev

如何在 React Native 中正确使用 redux saga 和后台事件?

来自分类Dev

React Router Redux不可变

Related 相关文章

  1. 1

    使用React,redux和react-redux-router登录验证:正确的方法是?

  2. 2

    如何使用React正确设置react-router-dom链接

  3. 3

    React和Redux:在Redux中存储加载状态的正确方法

  4. 4

    React-Router-Redux和React-Bootstrap

  5. 5

    React工具包和Redux-First-Router

  6. 6

    使用 React Router 渲染组件和 Redux 崩溃

  7. 7

    结合 React Router 和 Redux 使我的重定向 KO

  8. 8

    react-router-redux和redux-immutable:您不能更改<Router history>;它会被忽略

  9. 9

    React Router-正确设置useParams用于详细信息页面

  10. 10

    在Angular2 Dart中设置Router和RouterLink的正确方法是什么

  11. 11

    使用 React 和 Redux 设置 Antd 的菜单 defaultSelectedKeys 值

  12. 12

    如何使用react-redux与mapStateToProps,MapDispatchToProps和Redux-Router连接

  13. 13

    从通过React Router设置的路由访问Redux Store

  14. 14

    React,Redux和React-Router服务器端渲染

  15. 15

    使用react-router和requirejs进行React的基本设置

  16. 16

    使用react-router和requirejs进行React的基本设置

  17. 17

    使用React Router和Redux Simple Router进行onEnter转换不会渲染新路由的组件

  18. 18

    带有 React.js 的 SSR(create-react-app、react-router v4、redux 和 sagas)

  19. 19

    设置React Router链接的样式

  20. 20

    无法设置React-Router

  21. 21

    使用React-Router和Redux时单击链接时如何调度动作?

  22. 22

    推荐使用Redux和React-Router进行深度链接的方法

  23. 23

    使用react-router和redux时如何维护商店的状态?

  24. 24

    登录后使用react-router-v5和redux-toolkit重定向页面

  25. 25

    Redux-Persist和Connected-React-Router:TypeError:无法读取未定义的属性“位置”

  26. 26

    使用react-router和redux容器组件对路由参数进行线程化

  27. 27

    推荐使用Redux和React-Router进行深度链接的方法

  28. 28

    如何在 React Native 中正确使用 redux saga 和后台事件?

  29. 29

    React Router Redux不可变

热门标签

归档