react-redux react-router存储不在道具中 [英] react-redux react-router store not available in props

问题描述

我刚开始在反应网站上使用redux。很小。 （我正在按照本教程 https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.mhkgga84t 将一些代码插入我的反应网站以防万一） 。但当我正在进行并尝试加入 this.props.store 时，即使我有< Provider store = {store}>，也无法使用它; 在我的应用中。这是我的客户端和应用程序代码（我可以提供更多，我只是不知道还有什么要添加）：

I just started to use redux on my react site. Pretty small. (and I'm following this tutorial https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.mhkgga84t plugging in some codes to my react site just in case). But when I was in progress and trying to acceess this.props.store it's not available even when I have <Provider store={store}> in my app. Here's my client and app code (I can provide more I just don't know what else to add):

// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';

import { routes } from './routes';
import { browserHistory } from 'react-router'

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import * as reducers from './reducers';
import { fromJS } from 'immutable';

let initialState = window.__INITIAL_STATE__;

Object.keys(initialState).forEach(key => {
  initialState[key] = fromJS(initialState[key]);
});

const reducer = combineReducers(reducers);
const store = createStore(reducer, initialState);
console.log('store', store);

ReactDOM.render(<Provider store={store}><Router routes={routes} history={browserHistory} store={store} /></Provider>, document.getElementById('app'));

但我无法访问 store this.props 。它应该在这里可用吗？所以我最终可以做 const {todos，dispatch} = this.props; ？

but I can't access store from this.props. It should be available here right? So I can do const { todos, dispatch } = this.props; eventually?

// src/components/app.js
import React from 'react';
import { Link } from 'react-router';

import HeaderComponent from './common/header';
import ShareFooterComponent from './common/share-footer';
import FooterComponent from './common/footer';

import { bindActionCreators } from 'redux';
import * as ListingActions from '../actions/listing';
import { connect } from 'react-redux';

export default class AppComponent extends React.Component {
  render() {
    console.log('apps', this.props);
    return (
      <div>
        <HeaderComponent />

        { this.props.children }

        <ShareFooterComponent />
        <FooterComponent />
      </div>
    );
  }
}

我错过了什么吗？

推荐答案

您似乎没有使用 connect 装饰器连接您的状态。如果我正在阅读教程正确的你应该包括行（或根据你的州结构的类似的东西）：

You don't seem to be wiring up your state with the connect decorator. If I am reading the tutorial correctly you should include the line (or something similar based on your state structure):

@connect(state => ({ todos: state.todos }))

或没有装饰器语法（更多succint版本in评论）：

or without decorator syntax (more succint version in the comments):

AppComponent = connect(state => ({ todos: state.todos }), null)(AppComponent);
export default AppComponent;`

这篇关于react-redux react-router存储不在道具中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！