javascript - Redux 和 React-router 正确设置

标签 javascript redux react-redux

我是 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)

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

Uncaught Error: Could not find "store" in either the context or props of "Connect(ClientsSubMenuContainer)". Either wrap the root component in a , or explicitly pass "store" as a prop to "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>

关于javascript - Redux 和 React-router 正确设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41568299/

相关文章:

javascript - Pebble.js 菜单项呈现缓慢

javascript - 在不卡住动画的情况下更改 css 线性渐变动画

javascript - React Redux onBlur 事件在 Safari 和 Firefox 中未触发

reactjs - 让 lodash throttle 与 Redux Action 一起工作

javascript - 在 React JS/Redux 中使用 CSS 显示/隐藏 div

javascript - 为什么当页面重定向时 jQuery getJSON 函数不执行而不是直接调用?

javascript - 为什么这段代码不能正确显示输出?

javascript - Webpack-dev-server、redux、同构 React 路由器不变错误

javascript - Redux connect() 删除了我的组件需要的功能

reactjs - 如何使用不变性助手来更新数组中的嵌套对象?