Container

App.js

// src/index.js //

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import App from './containers/App';

const store = createStore(rootReducer);

window.duombaze = store;

render(
  // 1. Istryne tiesiogini duombazes atvaizdavima ikeliame App komponenta
  // 2. Kad App komponentas susijungtu su duombaze (store) privalome ji apjuosti
  // Provider komponentu, kuri importuosime is 'react-redux' bibliotekos zr. auksciau
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);


// src/containers/App.js //

import React from 'react';
import { connect } from 'react-redux';
import { addInfo } from '../actions';

// 4. App komponentas kaip propsus gauna info ir dispatch parametrus
// dispatch pagalba issiunciame i duombaze informacija
const App = ({ info, dispatch }) => {
    return (
        <div>
            <p>{info}</p>
            <button onClick={() => dispatch(addInfo('Pakeista info'))}>Pakeisti info</button>
        </div>
    );
}

// 1. Provider komponentas siai funkcijai siuncia state(duombazes duomenis)
// juos pavadinkime 'info'
const mapStateToProps = state => ({
    info : state
});

// 2. Provider siai funkcijai siuncia dispatch funkcija.
// jos pagalba inicijuosime action'us
const mapDispatchToProps = dispatch => ({
    dispatch: dispatch
});

// 3. Kad virsutinis komponentas priimtu info ir dispatch parametrus
// naudojame connect funkcija ir sujungiame viska su App komponentu
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);