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