新的反应和Redux，为什么我得到一个未定义的商店被传递？

Question

我不确定我是否正确设置了这个redux-react项目。我很困惑，我怎么能真正开始在我的反应应用程序中使用商店。

当我尝试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;
};

减速器/ index.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您的组件才能访问商店/州。为此，请修改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