【问题标题】:react-redux can't find store but it sure looks like it's therereact-redux 找不到商店,但它确实看起来在那里
【发布时间】:2015-12-09 06:08:52
【问题描述】:

好的 - 我到底想念什么......花了一天半的时间试图解决这个问题,并且即将放弃 redux......

我有以下根路由...

...

import configureStore from 'NewApp/client/store';
import createBrowserHistory from 'history/lib/createBrowserHistory';

const history = createBrowserHistory();
const store = configureStore(history);

ReactDOM.render(
  <Provider store={store}>
   <Router
     history={history}
     children={routes}
     {...clientOptions.props} />
  </Provider>
  , rootElement
);

...

我看到了 store 对象,但我一直收到错误消息说它不存在...

添加请求的附加代码:

...

import rootReducer from '../reducers';

const middlewares = [
  thunkMiddleware,
  loggerMiddleware,
];

const finalCreateStore = compose(
  applyMiddleware(...middlewares),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);

export default function configureStore(history, initialState) {
  const store = finalCreateStore(rootReducer, initialState);
  syncReduxAndRouter(history, store, state => state.router);

  return store;
}
...

...

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { clearNotification } from '../actions/notifications';
import { logout } from '../actions/auth';
import App from '../components/App';

function mapStateToProps(state) {
  return {
    locale: state.app.locale,
    loggingIn: state.auth.loggingIn,
    messages: state.app.messages,
    notification: state.notification,
    title: state.app.title,
    user: state.auth.user,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    clearNotification,
    logout,
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

【问题讨论】:

  • 您是否从react-redux 导入了Provider
  • 是的,我做到了...为了简洁起见,我只是将其他导入排除在外,否则我会遇到严重的失败 ;-)
  • 你能显示你使用connect的代码吗?
  • 我用连接和附加信息更新了问题
  • 我从未见过react-router 以这种方式使用。您可以尝试将容器 &lt;App/&gt; 放在 &lt;Provider&gt; 内,看看它是否有效?

标签: reactjs reactjs-flux redux


【解决方案1】:

好的,这就是交易...事实证明,我正在使用的演示应用程序代码拆分,如果除了已经提供的所有“快乐”redux 之外,您还添加了flux/redux,您实际上需要根据this repo“拆分”你的减速器。

我上面的问题中的原始错误发生在任何非根路由上,因为 webpack 代码拆分使这些路由器调用异步 - 基本上是通过商店中的减速器使事情变得不平衡。此答案中链接到的repo 显示了如何使路由器和存储与“动态”减速器保持同步。

只有我一个人开始觉得添加 redux 变得比一开始就编写一个完整的大型复杂应用程序需要更多的工作吗?看到那些 redux 10 line 'counter' 应用程序演示让它看起来如此......简单吗?无论如何,希望这个揭幕,顺便说一下,在 redux 中没有很好地记录,但可以在未来帮助某人!

【讨论】:

    猜你喜欢
    • 2017-06-23
    • 1970-01-01
    • 2018-03-14
    • 2016-09-30
    • 1970-01-01
    • 2020-02-06
    • 2013-07-29
    • 2021-01-06
    • 1970-01-01
    相关资源
    最近更新 更多