Question

我刚刚开始使用React / Redux，并在测试时使用Redux正常工作。

但是，我无法将其连接到我的实际应用程序中。

我认为我应该使用connect()，但我不知道如何/在哪里。

// libraries
import React from 'react';
import ReactDOM from 'react-dom';

// redux
import { Provider } from 'react-redux';
import store from './redux/store';
import './redux/test.js';
import {connect} from 'react-redux'


class App extends React.Component {

  constructor(props, test) {
    super(props);
  }

  render () {
    return (
      <div id = 'contents'>
      </div>
    )
  }
}

const app = document.getElementById('app');
ReactDOM.render(

  <Provider store={store}>
    <App></App>
  </Provider>

, app);

Answer 1

您需要connect您的组件App。

举个例子，让我们假设您的商店中名为reducer的reducer中有价值：

// libraries
import React from 'react';
import ReactDOM from 'react-dom';

// redux
import { Provider } from 'react-redux';
import store from './redux/store';
import './redux/test.js';
import {connect} from 'react-redux'


class App extends React.Component {

  constructor(props, test) {
    super(props);
  }

  render () {
    // You can use data from props
    return (
      <div id = 'contents'>
        {this.props.data}
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // Bind your store state to the component data
  return {
    date: state.reducer.value,
  };
}

const mapDispatchToProps = (dispatch) => {
  // Bind actions to your component
}

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

const app = document.getElementById('app');
ReactDOM.render(

  <Provider store={store}>
    <ConnectedApp></ConnectedApp >
  </Provider>

, app);

Answer 2

所以你需要的是使用connect：

返回的函数包装App

 const AppWithRedux = connect()(App);
 ReactDOM.render(

 <Provider store={store}>
   <AppWithRedux/>
 </Provider>,
 app);

但您可以在以下链接中找到关于如何将redux与react进行集成的良好示例：

http://redux.js.org/docs/basics/UsageWithReact.html

- 如何在这个顶级文件中访问我的容器/商店？

2 个答案: