新しく反応してReduxに新しい、なぜ未定義のストアが渡されるのですか？

Question

私はこのredux-reactプロジェクトを正しく設定しているかどうかはわかりません。私は実際に私の反応アプリ内で店を使用し始める方法について混乱しています。

console.logストアにしようとすると、私は未定義になっています。私はこれをボイラープレートから大部分を得て、これらの部品のいくつかがどのように相互作用するかは不明です。

import React, { Component } from 'react'; 
import DevTools from './DevTools'; 
import MyNavbar from '../components/MyNavbar'; 
import Footer from '../components/Footer' 

module.exports = class Root extends Component { 
    render() { 
    const { store } = this.props; 

    console.log(store) 

    return (
      <div> 
      <MyNavbar /> 
      {this.props.children} 
      <Footer /> 
      {/* Being the dev version of our Root component, we include DevTools below */} 
      {/*<DevTools />*/} 
      </div> 


    ); 
    } 
}; 

ホームコンポーネント：：

import React, { Component, PropTypes } from 'react'; 
import { Row, Col, Grid } from 'react-bootstrap' 
import HowItWorks from '../components/HowItWorks' 
import GetStarted from '../components/GetStarted' 
import Setup from './Setup' 




export default class Home extends Component { 
    render() { 
    // we can use ES6's object destructuring to effectively 'unpack' our props 
    return (
     <section> 
      <div className="slider-wrapper"> 
       <GetStarted /> 
      </div> 
      <Grid> 
       <div className="howwork-wrapper"> 
        <Row > 
         <Col md={12}> 
          <HowItWorks /> 
         </Col> 
        </Row> 
       </div> 
      </Grid> 
     </section> 

    ); 
    } 
} 

configureStore.js：

import { createStore, applyMiddleware, compose } from 'redux'; 
import rootReducer from '../reducers'; 
import createLogger from 'redux-logger'; 
import thunk from 'redux-thunk'; 
import DevTools from '../containers/DevTools'; 


const logger = createLogger(); 

const finalCreateStore = compose(
    applyMiddleware(logger, thunk), 
    DevTools.instrument() 
)(createStore); 

module.exports = function configureStore(initialState) { 
    const store = finalCreateStore(rootReducer, initialState); 
    if (module.hot) { 
    module.hot.accept('../reducers',() => 
     store.replaceReducer(require('../reducers')) 
    ); 
    } 

    return store; 
}; 

リデューサー/インデックス現在、私は

import { Provider } from 'react-redux' 
import { configureStore } from './store/configureStore'; 
const store = configureStore() 


import { Root} from './containers/Root'; 
import Home from './containers/Home' 
ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="/" component={Root}> 
     <IndexRoute component={Home} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

Root.jsとindex.jsを持っています.js：

import { combineReducers } from 'redux'; 

import auth from './auth' 


const rootReducer = combineReducers({ 
    auth 
}); 

export default rootReducer; 

リデューサー/ auth.js：

import { LOGIN, LOGIN_FAIL, LOGOUT } from '../constants/ActionTypes' 
export default function auth(state = {}, action) { 
    switch (action.type) { 
    case LOGIN: 
    return state; 
    case LOGIN_FAIL: 
    return state ; 
    case LOGOUT: 
    return state ; 
    default: 
    return state; 
    } 
} 

定数/ ActionTypes：

export const LOGIN = 'LOGIN'; 
export const LOGIN_FAIL = 'LOGIN_FAIL'; 
export const LOGOUT = 'LOGOUT'; 

Answer 1

あなたは店/状態へのアクセスを得るためにあなたのコンポーネントをconnectする必要があります。これを行うには、このようなあなたのルートコンポーネントを変更します。

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import DevTools from './DevTools'; 
import MyNavbar from '../components/MyNavbar'; 
import Footer from '../components/Footer' 

class Root extends Component { 
    render() { 
    const { state } = this.props; 

    console.log(state) 

    return (
      <div> 
      <MyNavbar /> 
      {this.props.children} 
      <Footer /> 
      {/* Being the dev version of our Root component, we include DevTools below */} 
      {/*<DevTools />*/} 
      </div> 


    ); 
    } 
}; 

const mapStateToProps = (state) => { 
    return { 
    state: state 
    } 
} 

module.exports = connect(mapStateToProps)(Root); 

いくつかの注意事項を、あなたはとにかくtranspilingされているので、あなたの可能性exportの代わりに、あなたの宣言でmodule.exports。また、一般的にあなたの状態全体を単一のコンポーネントに公開しないようにします。このパターンに従って、複数のコンポーネントを接続（コンテナ化）することができます。

以下は、あなたの州に接続されているコンポーネントの例です。

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

export class SomeComponent extends Component { 
    render() { 
    const { someKey, dispatchSomething } = this.props; 

    return (
     <div onClick={dispatchSomething}> 
     <h1>My rendered someKey variable: {someKey}</h1> 
     </div> 
    ); 
    } 
}; 

const mapStateToProps = (state) => { 
    return { 
    someKey: state.someReducer.someKey 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    dispatchSomething:() => dispatch(someActionCreator()) 
    } 
} 

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

参照

• react-redux API: connect