【问题标题】：New to react and Redux, why am i getting an undefined store being passed?react 和 Redux 的新手，为什么我会通过未定义的商店？
【发布时间】：2017-02-22 22:31:29
【问题描述】：

我不确定我是否正确设置了这个 redux-react 项目。我对如何在我的 react 应用程序中实际开始使用 store 感到困惑。

当我尝试 console.log 存储时，我变得不确定。我从样板文件中得到了大部分内容，并且不确定其中一些部分是如何相互作用的。目前我有一个 index.js 与

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：

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

reducers/index.js：

import { combineReducers } from 'redux';

import auth from './auth'


const rootReducer = combineReducers({
  auth
});

export default rootReducer;

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

常量/动作类型：

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

【问题讨论】：

我认为属性不会“自动”传递给子元素。
在哪里使用console.log打印店铺内容？
我只是在我的根组件中通过控制台将其注销，我没有正确传递 store 道具吗？

标签： reactjs redux react-router jsx

【解决方案1】：

您需要connect 您的组件才能访问存储/状态。为此，请像这样修改您的 Root 组件：

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

一些注意事项，因为无论如何你都在编译，你可以在声明中使用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

【讨论】：