/react-redux-typescript-sample

A simple app with an initial structure of files and code using the technologies described in the name.

Primary LanguageTypeScriptMIT LicenseMIT

react-redux-typescript-sample

A simple app with an initial structure of files and code using the technologies described in the name for you to use to create your webapp quickly.

Packages and tools used

  • TypeScript: To type the code and components.
  • React: Separate the interface into components.
  • Redux: Manage the global state of the application.
  • Parcel ❤: to bundle the app but it can be refactored to use other packages, such as the webapack or zero.
  • faker: Generate fake data.

Instalation

git clone https://github.com/httpiago/react-redux-typescript-sample.git
cd react-redux-typescript-sample
yarn install

Commands

Folder Structure

.
├── src
│   ├── components       // Folder with all the components
│   │   ├── App.tsx      // Main component
│   │   ├── Form.tsx
│   │   └ ...
│   ├── store            // Folder with all the redux logic
│   │   ├── ducks
│   │   │   └── todos.ts // File with types, action creators and reducer of todos logic
│   │   ├── index.tsx    // Combine all reducers and create store
│   │   └── types.tsx
│   ├── index.html
│   └── index.tsx        // Main file of the app
├── package.json
├── README.md
├── tsconfig.json        // Typescript compiler configs
└ ...

Duck Pattern

This sample uses Duck Pattern to structure the redux files logic and consequently make the app simpler. Take a look 😉.

Redux hooks

Some components use the new Redux hook api, so you can just see how to use them.

License

MIT