React + Redux parent function call?

Question

JavaScript

Good afternoon! I'm learning from the React + Redux example, but I can't seem to call the parent function to call the actions.

import { createStore, combineReducers } from 'redux';
import ReactDOM from 'react-dom';
import React from 'react';

import App from './containers/App.js';
import Sidebar from './components/Sidebar';
import { decks, cards, addingDeck} from './reducers/Reducers';
import { showAddDeck, hideAddDeck, addDeck } from './actions/Actions';
import './main.scss';

const store = createStore(combineReducers({ cards, decks, addingDeck }));

function run() {
  let state = store.getState();

  ReactDOM.render(
    <App>
      <Sidebar
        decks = {state.decks}
        addingDeck = {state.addingDeck}
        addDeck = {name => store.dispatch(addDeck(name))}
        showAddDeck = {() => store.dispatch(showAddDeck())}
        hideAddDeck = {() => store.dispatch(hideAddDeck())}
      />
    </App>,
    document.getElementById('root')
  );
}

run();

store.subscribe(run);

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

export default class Sidebar extends React.Component {
  createDeck(event) {
    if(event.with !== 13) return;

    var name = ReactDOM.findDOMNode(this.refs.add).value;
    this.props.addingDeck(name);
    this.props.hideAddDeck();
  }

  render() {
    let props = this.props;

    return (
      <div className="sidebar">
        <h2>All Decks</h2>

        <button onClick={e => this.props.showAddDeck}>
          New Deck
        </button>

        <ul>
          {props.decks.map((deck, i) => {
              return <li key={i}>{deck.name}</li>
            })
          }
        </ul>
        { props.addingDeck && <input ref="add" onKeyPress={this.createDeck}/> }
      </div>
    );
  }
}

I get everything in props:

but I can’t call it in any way. I would be grateful for the help
PS If you call store.dispatch outside the run function, then everything works and the component is redrawn

Answer 1

Created a new function and tweaked the code

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

export default class Sidebar extends React.Component {
  createDeck(event) {
    if(event.which !== 13) return;

    var name = 'ReactDOM.findDOMNode(this.refs.add).value';
    this.props.addDeck(name);
    this.props.hideAddDeck();
  }

  addingDeck(event) {
    this.props.showAddDeck();
  }

  render() {
    let props = this.props;

    return (
      <div className="sidebar">
        <h2>All Decks</h2>

        <button onClick={e => this.addingDeck(e)}>
          New Deck
        </button>

        <ul>
          {props.decks.map((deck, i) => {
              return <li key={i}>{deck.name}</li>
            })
          }
        </ul>
        { this.props.addingDeck && <input ref='add' onKeyPress={e => this.createDeck(e)}/> }
      </div>
    );
  }
}