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'));
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>
);
}
}
Am I missing anything?