react 和 Redux 的新手，为啥我会通过未定义的商店？

Posted 2023-02-21

【中文标题】react 和 Redux 的新手，为啥我会通过未定义的商店？

【英文标题】：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 道具吗？

【参考方案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