Question

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

制定一个包含Provider的路由方案：

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

我现在得到的是一个警告：

未捕获错误：无法找到＆＃34;存储＆＃34;在上下文或道具中＆＃34; Connect（ClientsSubMenuContainer）＆＃34;。包装根组件 a，或明确传递＆＃34; store＆＃34;作为支柱＆＃34;连接（ClientsSubMenuContainer）＆＃34;

如何正确设置，以便所有组件（不包括或包括登录）都可以访问商店和所有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 />

后消失了

Answer 1

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

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

Redux和react-router正确设置

1 个答案: