react-redux react-router存储不可用于道具

Question

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

// 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')); 

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

// 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> 
    ); 
    } 
} 

我是否缺少任何东西？

Answer 1

你似乎没有用connect修饰器来连接你的状态。如果我读tutorial正确，您应该包括线（或类似的基于你的状态结构的东西）：（在评论更succint版）

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

或不使用修饰语法：

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

Answer 2

所以，第一件事我注意到，似乎不正确的是你是路过商店的供应商和路由器都

<Provider store={store}><Router routes={routes} history={browserHistory} store={store} /></Provider> 

凡只会neede d in Provider like

<Provider store={store}><Router routes={routes} history={browserHistory} /></Provider> 

然后就像Ashley Coolman说的那样，您需要将组件连接到redux。 如果你的版本是为它设置的，可以使用装饰器完成。但是，您也可以从react-redux导入connect函数。关于它的文档可以在here找到。

我会钩住你的组件的方法是以下

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

function addTodo(todo) { 
    return { type: ADD_TODO, payload: todo } 
} 

function mapStateToProps(state) { 
    // the state is from store.getState() 
    // example will pass a todos prop to the connected component 
    // so if you want all the state in this component use the spread operator 
    return { 
     todos: state.todos 
    } 
} 


function mapDispatchToProps(dispatch) { 
    // bindActionCreators will wrap all the function in the passed in object 
    // with the dispatch function so that the actionCreators can be called 
    // directly; without dispatch eg this.props.addTodo(sometodo) 
    return bindActionCreators({ addTodo }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(AppComponent) 

之后，你将不得不作为你的组件都addTodo（功能）和todos道具。给你

this.props.todos 
this.props.addTodo()