title: Setting initial state in component to Redux store
body: <p>I'm using template project from VS (React + Redux + TS) and I don't know exactly how to set component state because when i do that in constructor, it omitting that.</p>
  
  <p>It looks like the component have two states (?): own, and from store. I don't understand this mechanism...</p>
  
  <pre><code>class Nodes extends React.Component&lt;{ handleClick: () =&gt; void, nodes: NodeProps[], force: any}, NodeStore.NodeState&gt;{
  
      constructor(props: any){
          super(props);
  
          this.state = {name: "test"}; //change 'in' component state
      }
  
      render(){
          const nodes = this.props.nodes.map((node: NodeProps, index: number) =&gt; {
              return &lt;Node key={index} node={node} onClick={this.handleClick} /&gt;;
              });
  
          return (
              &lt;g className="nodes"&gt;
              {nodes}
              TestName: {this.state.name} // thats always "test", but after click should be "testaddedstring" 
              &lt;/g&gt;
          );
      }
  
      private handleClick =() =&gt; {
          this.props.handleClick();
          alert("clicked!");
      }
  }
  
  const mapStateToProps = (state: ApplicationState) =&gt; {
      return {
          name: state.node.name // state from store not from component
      }
  };
  
  const mapDispatchToProps = {
      handleClick: NodeStore.actionCreators.changeName
  };
  
  export default connect&lt;any, typeof NodeStore.actionCreators, any&gt;(
      mapStateToProps,
      mapDispatchToProps
  )(Nodes);
  </code></pre>
  
  <p>This is the index.ts file with store definitions:</p>
  
  <pre><code>export interface ApplicationState {
  
      node: Node.NodeState; 
  }
  
  export const reducers = {
      node: Node.reducer
  };
  
  export interface AppThunkAction&lt;TAction&gt; {
      (dispatch: (action: TAction) =&gt; void, getState: () =&gt; ApplicationState): void;
  }
  </code></pre>
  
  <p>and action reducer:</p>
  
  <pre><code>export interface NodeState {
      name: string;
  }
  
  interface ChangeNameAction {type: 'CHANGE_NAME'}
  
  export const actionCreators = {
      changeName: () =&gt; &lt;ChangeNameAction&gt;{ type: 'CHANGE_NAME' }
  }
  
  export const reducer: Reducer&lt;NodeState&gt; = (state: NodeState, action: ChangeNameAction) =&gt; {
      if (action.type === 'CHANGE_NAME'){
          return { name: state.name + "addedstring"};
      }
  
      return state || {name: "default name"};
  };
  </code></pre>
  
  <p>What is missed?</p>