connect react redux typescript code example

Example 1: add redux to react typescript

npm install redux react-redux
npm install -D @types/redux @types/react-redux

Example 2: create react app with redux and typescript

npx create-react-app hello-world --typescript

Example 3: react redux typescript

// Complete guide to react redux typescript

// https://github.com/piotrwitek/react-redux-typescript-guide

Example 4: typescript types for state

interface IProps {
}

interface IState {
  playOrPause?: string;
}

class Player extends React.Component<IProps, IState> {
  // ------------------------------------------^
  constructor(props: IProps) {
    super(props);

    this.state = {
      playOrPause: 'Play'
    };
  }

  render() {
    return(
      <div>
        <button
          ref={playPause => this.playPause = playPause}
          title={this.state.playOrPause} // in this line I get an error
        >
          Play
        </button>
      </div>
    );
  }
}

Example 5: react redux typescript

/* Answer to: "react redux typescript" */

/*
  I suggest checking out:
  - https://redux.js.org/recipes/usage-with-typescript/
  - https://medium.com/@rossbulat/how-to-use-typescript-with-react-and-redux-a118b1e02b76
*/