# redux-scfld

> Redux Scaffold

Latest version **3.4.3** (published 2018-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-scfld
pnpm add redux-scfld
yarn add redux-scfld
bun add redux-scfld
```

Provides the command `redux`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.4.3 |
| Published | 2018-07-18 |
| First published | 2016-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 60.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ivan Zakharchenko |
| Maintainers | 3axap4ehko |
| Keywords | redux, scaffolder |

## Links

- npm: https://www.npmjs.com/package/redux-scfld
- Repository: https://github.com/3axap4eHko/redux-scfld
- Homepage: https://github.com/3axap4eHko/redux-scfld#readme
- Issues: https://github.com/3axap4eHko/redux-scfld/issues
- npm.io page: https://npm.io/package/redux-scfld

## Dependencies (7)

- [del](https://npm.io/package/del.md) ^3.0.0
- [dot](https://npm.io/package/dot.md) ^1.1.2
- [glob](https://npm.io/package/glob.md) ^7.0.5
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [commander](https://npm.io/package/commander.md) ^2.13.0
- [redux-base](https://npm.io/package/redux-base.md) ^3.4.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0

## Recent versions

- 3.4.3 (latest) — 2018-07-18
- 3.4.2 — 2018-07-18
- 3.4.1 — 2018-07-18
- 3.4.0 — 2018-05-16
- 3.3.4 — 2018-02-28
- 3.3.3 — 2018-02-28
- 3.3.2 — 2018-02-13
- 3.3.1 — 2018-02-13
- 3.3.0 — 2018-02-13
- 3.2.0 — 2018-02-13
- 3.1.2 — 2018-02-13
- 3.1.1 — 2018-02-13
- 3.1.0 — 2018-02-13
- 3.0.3 — 2018-02-06
- 3.0.2 — 2018-02-06
- … 40 more at https://npm.io/package/redux-scfld/versions

## README

# Redux Scaffold Generator

## Install
 $ npm install -g redux-scfld

## Requirements
 - redux
 - redux-base
 - redux-thunk

## Convention
Redux Scaffold works with `actions`, `reducers`, initial `states` and `types` through the concept of
Redux Scaffold Entity (RSE). That's meaning all RSE grouped by RSE Namespace.

For a every single RSE exists a single `action` and a single `type` and for every RSE Namespace exists single initial `state` and `reducer`. 
Redux Scaffold generates RSE from RSE Full Name of following format `{RSENamespace}:{RSEName}`. 

For example:

`recently-posts:load-page` or `recentlyPosts:loadPage` has `recentlyPost` as RSE Namespace and `loadPage` as `RSE Name`.
Through this approach will be generated `action`, `reducer`, `type` and initial `state`. 

Redux Scaffold action with parameter `type` has also parameter `status` which can be 
`STATUS_PROCESS`, `STATUS_SUCCESS` and `STATUS_FAILURE` in compare of usual behavior of Redux.

## Let's scaffold
```bash
npm install -g redux-scfld
cd ~/projects/my-project
redux init --path src/redux
``` 
#### Config
Inside of `~/projects/my-project` you will find a file `.reduxrc`
``` json
{
  "useCamelCasedPaths": false,
  "reduxPath": "src/redux",
  "actionsPath": "src/redux/actions",
  "typesPath": "src/redux/types",
  "statesPath": "src/redux/states",
  "storeTemplatePath": "src/templates/store.dot",
  "actionTemplatePath": "src/templates/action.dot",
  "actionsIndexTemplatePath": "src/templates/action-index.dot",
  "typesTemplatePath": "src/templates/types.dot",
  "stateTemplatePath": "src/templates/state.dot",
  "statesIndexTemplatePath": "src/templates/state-index.dot"
}
```
Here is property `useCamelCasedPaths` affects naming behavior between `camelCase` and `dash-case`.
As template engine used `doT`.

#### Structure
Let's create an action, reducer, type and initial state of RSE. 
``` bash
redux add config:load config:save posts:fetchPage
```
After this command will be generated following files
```
+---src
    |
    \---redux
        |   createStore.js
        |
        |   
        +---actions
        |   |   index.js
        |   |
        |   +---config   
        |   |       load.js
        |   |       save.js
        |   \---posts
        |           fetchPage.js
        |           
        |
        +---state
        |       index.js
        |       config.js
        |       posts.js
        |
        |
        +---templates
        |       store.dot
        |       action.dot
        |       action-index.dot
        |       state.dot
        |       state-index.dot
        |       types.dot
        |           
        |           
        \---types
                index.js
```

#### Actions

`src/redux/actions/posts/fetchPage.js`, `src/redux/actions/config/load.js`, `src/redux/actions/posts/save.js` will contain
``` javascript
import action from 'redux-base/createAction';
import {
  NAMESPACE_CONFIG,
  CONFIG_LOAD,
} from '../../types';

export default action(NAMESPACE_CONFIG, CONFIG_LOAD, (getState, ...args) => {
  /** Action code HERE */
});
```

`app/actions/index.js` contains
``` javascript
export { default as configLoad } from './config/load.js';
export { default as configSave } from './config/save.js';
export { default as postsFetchPage } from './posts/fetchPage.js';
```

**IMPORTANT**: Instead of original Redux actions, Redux Scaffold Actions has only one `type`, but one `namespace` and 3 `statuses`: `STATUS_PROCESS`, `STATUS_SUCCESS`, `STATUS_FAILURE`

**IMPORTANT**: You should avoid editing of generated index files. See templates generation

#### Types
``` javascript
// Statuses
export const STATUS_PROCESS = 'STATUS_PROCESS';
export const STATUS_SUCCESS = 'STATUS_SUCCESS';
export const STATUS_FAILURE = 'STATUS_FAILURE';

// Generated Namespaces
export const NAMESPACE_CONFIG = 'config';
export const NAMESPACE_POSTS = 'posts';

export const NAMESPACES = [
    NAMESPACE_CONFIG,
    NAMESPACE_POSTS,
];

// Generated types
export const CONFIG_LOAD = 'CONFIG_LOAD';
export const CONFIG_SAVE = 'CONFIG_SAVE';
export const POSTS_FETCH_PAGE = 'POSTS_FETCH_PAGE';
```

**IMPORTANT**: You should avoid editing of generated index files. See templates generation

#### Initial states

State is represented by separate files for each namespace and will be generated automatically for each namespace.


#### Store

Also will be generated `src/redux/createStore.js` file with basic store setup.
You can edit this file for own purposes.

``` javascript
/*! Generated by redux-scfld */
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import createReducer from 'redux-base/createReducer';
import defaultState from './states';

const loggerMiddleware = createLogger({
  collapsed: true,
  level: 'info',
  stateTransformer({ series, seasons }) {
    return { series, seasons };
  },
  actionTransformer(action) {
    return { type: `${action.type}_${action.status || ''}` };
  },
});

const reducer = createReducer(defaultState);

const middleware = [
  thunkMiddleware,
  loggerMiddleware,
].filter(Boolean);

export default function create(initialState = defaultState) {
  const store = createStore(
    reducer,
    initialState,
    applyMiddleware(...middleware));

  store.dispatchAll = function dispatchAll(actions) {
    return Promise.all(actions.map(action => store.dispatch(action())));
  };

  store.dispatchEach = async function dispatchEach(actions) {
    for(const action of actions) {
      await store.dispatch(action());
    }
  };

  return store;
}
```

### Action dispatching
``` javascript
'use strict';
import { postsFetchPage } from './src/redux/actions'
import createStore from './store'

const store = createStore();
store.dispatch(postsFetchPage());
```

### Templates

Template files are using tiny and fast [doT.js](http://olado.github.io/doT/index.html) template engine.
From template you can access to `it.entity` and `it.entities` variables, [see default templates for example](https://github.com/3axap4eHko/redux-scfld/tree/master/packages/redux-scfld/templates).

 ``` typescript
interface Entity {
   namespace
   NAMESPACE
   fullName
   FullName
   name
   Name
   TYPE
   filename
   path
   actionFolder
   actionPath
   reducerPath
   statePath
}
```

``` typescript
interface Entities {
  [entity.namespace]: {
    [entity.name]: entity
  }
}
 ```


### Commands
`$ redux init src/redux` - Generate Redux-Scfld config file `.reduxrc` and save templates to `src/redux/templates`

`$ redux add <entities>` - Adds entities separated by whitespace with Action, Type and Reducer and generates their indexes

`$ redux del <entities>` - Deletes entities separated by whitespace with Action, Type and Reducer or all namespaces and generates their indexes

`$ redux config` - Display current config

`$ redux sync` - Sync indexes of Actions, Types and Reducers (does not affect already generated not indexes files)

`$ redux list` - List of entities

`$ redux namespaces` - List of namespaces

`$ redux types` - List of types

`$ redux --help` - Display help information

### Demo project
(Powered by redux-scfld: React-Redux demo)[https://github.com/3axap4eHko/react-redux-demo]

## License
[The MIT License](http://opensource.org/licenses/MIT)
Copyright (c) 2016-2018 Ivan Zakharchenko

---
_Source: https://npm.io/package/redux-scfld · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._