Skip to content

maxkudla/react-type-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-type-cli

CLI tool for React + Redux with Typescript

Features

  • support "ducks mode"

    ├── src
    │   └── ducks
    │       ├── auth
    │       │   ├── actions
    │       │   └── reducers
    │       │
    │       └── product
    │           ├── actions
    │           └── reducers
    │
    │── package.json
    
  • support "common mode"

    ├── src
    │   ├── actions
    │   └── reducers
    │      
    │── package.json
    
  • generating components (class/function)

  • generating actions

  • generating reducers automatically for action

  • generating sagas automatically for action

  • generating selectors file with reselect

  • generating stories file with storybook

  • generating styles file with styled-components

Installation

$ npm i -g react-type-cli

Configuration

Create a .rtcrc file in your root directory to configure cli.

{
    "componentsPath": "src/components",
    "actionsPath": "src/actions",
    "reducersPath": "src/reducers",
    "sagasPath": "src/sagas",
    "selectorsPath": "src/selectors",
    "ducksPath": "ducks",
    "withSaga": true,
    "withReselect": true,
    "initialState": {
        "data": null,
        "error": null,
        "loading": false
    },
    "rootState": "AppState"

}
  • componentsPath - place for your common components
  • ducksPath if you are using "ducks mode"
  • actionsPath, reducersPath, sagasPath, selectorsPath if you are using "common mode"
  • withSaga if you are using redux-saga
  • withReselect if you are using reselect
  • initialState common initial state object
  • rootState root state type interface

Using

Generate component with rtc gc ComponentName command.

Note: By default component will be created in the same dir command was called from

  • -g - create common component
  • -f - create function component
  • -m - with React.memo
  • -c - with Redux.connect
  • -s - with styled-components styles
  • --stories - with storybook stories

Generate duck with rtc gd auth command.

Generate action with rtc ga fetchUserData auth command.

  • -p - call actions with payload argument
  • -e - call error actions with error argument
  • --no-reducer - do not create reducer for this action
  • --no-saga - do not create saga for this action