问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react-redux能像vuex一样在入口文件注入store随处都可以访问？

头像
凌乱_小青年
    30355182

    react-redux能像vuex一样在入口文件注入store随处都可以访问？新手
    如下代码：
    如果我需要访问store组件都要加一次<Provider store={store}>{children}</Provider>和创建一次createStore吗

    在father组件内，访问store 为undefind

    clipboard.png

    import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import CounterReducer from '../reducers/CounterReducer';

let store = createStore(CounterReducer);

export default ({ children }) => <Provider store={store}>{children}</Provider>

    index.js

    ReactDOM.render(
    <Provider store={store}>
    <BrowserRouter>
        <Father />
    </BrowserRouter></Provider>,
    document.getElementById('root')
);

    father.js

    import React, { Component } from 'react';
import Head from './Head';
import Main from './Main';
import Footer from './Footer';
class Father extends Component {
  render() {
    console.log(this.store);
      return(
        <div className="my-app">
          <img style={{width:'200px',margin:'0 auto',display:'block'}} src={require('../logo.svg')} alt={'logo'} />
          <Head></Head>
          <Main></Main>
          <Footer></Footer>
        </div>
      )
  }
}

export default Father;
    javascriptreactredux
    阅读 1.8k
    1 个回答
    得票最新
    头像
    stone
      2.3k1310
      ✓ 已被采纳

      你这个Father组件需要跟store做连接

      import React, { Component } from 'react';
import { connect } from 'react-redux'
import Head from './Head';
import Main from './Main';
import Footer from './Footer';
class Father extends Component {
  render() {
    // 通过pros获取store中的数据
    console.log(this.props);
      return(
        <div className="my-app">
          <img style={{width:'200px',margin:'0 auto',display:'block'}} src={require('../logo.svg')} alt={'logo'} />
          <Head></Head>
          <Main></Main>
          <Footer></Footer>
        </div>
      )
  }
}
const mapStateToProps = (state) => {
    return {
        
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Father)
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题