React + Redux + TypeScript pattern

This is a pattern for using React with Redux in TypeScript. This includes type-safety for FSA (Flux standard actions) at the action creation and in the reducer.

React Components are wrapped in a Container that connects the Component to Redux. Interfaces are declared for the component's Props in the Container; split into Props and Actions to separate properties and action callbacks.

Layout

The folder / file layout this pattern uses is:

• src/modules/index.js the root file for the Redux store and root reducer
• src/modules/<module> app modules, containing components, containers, actions and reducers.
• src/modules/<module>/components React components
• src/modules/<module>/containers React component containers
• src/modules/<module>/actions.ts Redux action creators
• src/modules/<module>/reducer.ts Redux reducer

Dependencies

• react
• redux
• react-redux (connects React and Redux)
• typescript-fsa (type-safe creators for flux standard actions)
• typescript-fsa-reducers (type-safe reducers for flux standard actions)
• redux-devtools-extension (debug Redux)

Upgrade from older version

After you have pulled the new version, you can upgrade from older version simply using the followings npm commands:

Uninstal the old react-scripts-ts:

npm uninstall react-scripts-ts

Installing the new react-scripts:

npm i react-scripts@latest

Installing the updated node modules dependencies:

npm i

Then run it using:

npm start

Running

You can run this project by cloning the git repo, then cd into the project folder.

We use yarn instead of npm, so first:

npm -g install yarn

Then install the required node modules:

yarn install

Then run it using:

yarn start

Setup

This project was setup using create-react-app. You can setup your own project using the commands below.

Install create-react-app:

npm install -g create-react-app

Create the project using create-react-app:

npx create-react-app <project> --typescript

# or

yarn create react-app <project> --typescript

cd <project>

Install dependencies:

yarn add redux react-redux
yarn add -D @types/react-redux
yarn add typescript-fsa-reducers typescript-fsa

Include the devtools:

yarn add redux-devtools-extension

Copy the template files by copying the modules folder from this repository into your new project:

cp -r ../react-redux-typescript-pattern/src/modules src/

Then look at the src/App.tsx in this pattern to see how to include the example container into your project.

IDE

Any development environment should suffice. I use Visual Studio Code.

Download and install VSCode.

Install extensions by going to the Extensions tab (or selecting Extensions from the View menu).

Install the following extensions:

• TSLint

There is a good tutorial on using Visual Studio Code with React.

Debugging

Create a file .vscode/launch.json with the following contents:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Then after running yarn start, close the browser window it creates, then go to the Debug tab in VSCode and click the Play button.

Redux DevTools Extension

Install the Redux DevTools for Chrome, Firefox and others by visiting http://extension.remotedev.io and following the instructions.