React 和 Redux 的新手，为什么我会传递一个未定义的商店？

Question

我不确定我是否正确设置了这个 redux-react 项目。我对如何真正开始在我的 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;
};

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

constants/ActionTypes:

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

Answer 1

您需要 connect 您的组件才能访问 store/state。为此，请像这样修改您的 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。此外，通常您不想要将整个状态公开给单个组件。您可以按照此模式连接多个组件（使它们 "containers"）。

以下是连接到您所在州的示例组件。

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

React 和 Redux 的新手，为什么我会传递一个未定义的商店？

New to react and Redux, why am i getting an undefined store being passed?

jsx

reactjs

react-router

redux

参考资料