cra-template-toolkit-saga-starter

1.0.1 • Public • Published

Installation

To install the template, simply run

// npm
npx create-react-app new-app --template toolkit-saga-starter
// yarn
yarn create react-app new-app --template toolkit-saga-starter

You will then see a preview of the template running at localehost:3000. That's it.

This is a create-react-app template featuring themes, multi-language, redux
apis, etc. We just combine two powerful tools for redux (saga & toolkit) to have a fantastic experiense with state management and SoC (Separation of concern).
Let's dive into it!

Get Started 🚀

Contributors

  1. Usage & Features
  2. File Generation
  3. Hooks
  4. Contribute

Usage & Features

Here is just part of benefits that this template provides you! (ignoring the fact that it can be used to create a full scaled applications without any issues)

- Fantastic approach in implementing redux

  • each container has a seperated slice of saga making it completely irrelevant yet connected to the main reducer (global slice)
  • easily handle asynchronous actions using saga
  • create redux slice from a simple command (See file generation)

- Themes

  • handle themes by just a simple enum named `Themes`. Just add a string to the enum and the font is officially added. More info in the code.
  • based on the language you provided the font will change accordingly. so each language has it's own font (best for multi-language)

- Multi language

  • "rtl" support
  • auto completion

File Generation

Genrate a container with just a simple command (consider container as a new page in your app)
simply run:

yarn generate container

you will be asked a series of questions in the terminal, like the name of your new page and so on...
then a completely new page with a auto generated redux file is presented to you in your app/containers like so:

src
│
└── app
    └── containers
        ├── NEWLY CREATED CONTAINER (PAGE)

Hooks

Use any slice anywhere in your app, simply by

use_CONTAINERNAME_Slice()

for example if we wanna use home slice

useHomeSlice()

and now whe can get all the data we want from that slice.
important note: You must add a slice using its hooks to the component if it is not in context of that container.

Contribute

Contributions are always welcome. Contact me!

                                                YAYA 💞

Package Sidebar

Install

npm i cra-template-toolkit-saga-starter

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

127 kB

Total Files

102

Last publish

Collaborators

  • yayaparvar