- 如何在此頂層文件中訪問我的容器/商店？

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您的組件應用程序。

例如，讓我們假設你在你的店裏有你的減速命名的減速值：

// 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

所以你需要什麼是包裝應用與連接返回的功能：

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

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

但你可以找到一個很好的例子，說明如何在以下鏈接中使用redux與react：

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