Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brandontruggles/add-redux
Quickly add Redux boilerplate files and directories to your vanilla JavaScript, React, or React Native App.
https://github.com/brandontruggles/add-redux
boilerplate cli javascript npm npm-module npm-package react react-native reactjs redux redux-logger redux-promise redux-thunk yarn
Last synced: 3 months ago
JSON representation
Quickly add Redux boilerplate files and directories to your vanilla JavaScript, React, or React Native App.
- Host: GitHub
- URL: https://github.com/brandontruggles/add-redux
- Owner: brandontruggles
- License: mit
- Created: 2017-10-10T23:58:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-17T02:18:34.000Z (over 6 years ago)
- Last Synced: 2024-09-30T17:30:50.237Z (3 months ago)
- Topics: boilerplate, cli, javascript, npm, npm-module, npm-package, react, react-native, reactjs, redux, redux-logger, redux-promise, redux-thunk, yarn
- Language: JavaScript
- Size: 33.2 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
add-redux [](https://github.com/brandonrninefive/add-redux/blob/master/LICENSE.md) [](https://www.npmjs.com/package/add-redux) [](https://travis-ci.org/brandonrninefive/add-redux) [](https://github.com/brandonrninefive/add-redux/issues)
===
Quickly add Redux boilerplate files and directories to your vanilla JavaScript, React, or React Native app.
Want to contribute to this project, request a feature, or report a problem? Please open an issue [here](https://github.com/brandonrninefive/add-redux/issues).
Getting Started
---
You can install add-redux with the command:
`npm i -g add-redux`
Alternatively, you can use yarn like so:
`yarn global add add-redux`
You can then use add-redux on an existing project like so:
`add-redux `
Please note that this command assumes `npm init` or `yarn init` has already been run in the project directory, and that a `package.json` file exists within it. `add-redux` will throw an error if `package.json` is not present.
If a `yarn.lock` file is present in the project directory, `add-redux` will use yarn to install packages instead of npm.
Why is this Needed?
---
When creating a Redux-based project, there are currently many popular cli tools: [redux-wooo](https://github.com/kocisov/wooo), [create-react-app-with-redux](https://github.com/tstringer/create-react-app-with-redux), [create-react-redux-native-app](https://github.com/kMeillet/create-react-redux-native-app), [generator-create-redux-app](https://github.com/jonidelv/generator-create-redux-app), [create-redux-app](https://github.com/ReactPoland/create-redux-app), etc.
These tools are useful, but there are three main problems with them:
1. Many of them are bloated and include features that are often unnecessary for basic applications.
2. Multiple commands are needed for different types of projects (i.e one is needed for regular React apps, while one is needed for React Native apps, and another is needed for vanilla JavaScript apps).
3. The commands themselves are often a bit long to type out.
`add-redux` aims to address these issues by providing a single, consice cli command for any type of Redux project, which sets up only the most barebones boilerplate code in order to avoid bloat.
What's Included?
---
Running `add-redux` on a project directory will add the following files and directories into the project directory:
```
├── reducers/ (only without the '--ducks' flag)
│ ├── index.js
│ ├── sampleReducers.js
├── actions/ (only without the '--ducks' flag)
│ ├── index.js
├── store.js
├── redux_examples/ (optional with the '--examples' flag)
│ ├── ...
├── ducks/ (optional with the '--ducks' flag)
│ ├── sampleDuck.js
```
From there, you can simply use `import store from 'store';` in your project to begin using Redux.
Any reducers should be created in the `reducers/` directory and imported into `index.js` to be merged with the other reducers.
Any actions should be created in the `actions/` directory.
`add-redux` will also save and configure the following middleware in your project by default:
- [redux-logger](https://github.com/evgenyrodionov/redux-logger)
- [redux-thunk](https://github.com/gaearon/redux-thunk)
- [redux-promise-middleware](https://github.com/pburtchaell/redux-promise-middleware)
If your project does not require any of these, see the option flags below.
Options
---
When using `add-redux`, you can specify the following flags to control which packages are installed by the command and configured in the boilerplate code:
- `-r, --react` - Adds [react-redux](https://github.com/reactjs/react-redux) to the project dependencies. This feature currently leaves the rest of the React setup to the user, but it does prompt the user on how to do so.
- `-l, --no-logger` - Skips adding [redux-logger](https://github.com/evgenyrodionov/redux-logger) to the project dependencies and boilerplate code.
- `-t, --no-thunk` - Skips adding [redux-thunk](https://github.com/gaearon/redux-thunk) to the project dependencies and boilerplate code.
- `-p, --no-promise` - Skips adding [redux-promise-middleware](https://github.com/pburtchaell/redux-promise-middleware) to the project dependencies and boilerplate code.
- `-e, --examples` - Adds a `redux_examples/` directory to the project root. This directory includes examples for integrating redux with different types of projects.
- `-d, --ducks` - Adds a `ducks/` directory to the project root. This directory contains an example modular redux file (also known as a [duck](https://github.com/erikras/ducks-modular-redux)). Using this option will prevent the `actions/` and `reducers/` directories from being generated, since they are not needed by the [duck specification](https://github.com/erikras/ducks-modular-redux).
- `-s, --src ` - Specifies the source directory for the project. This is where the boilerplate code will reside. Defaults to the root project directory. The directory argument should be a relative path name from the root project directory.
Examples
---
The following example directories are generated within the `redux_examples/` directory when using the `--examples` flag.
- `react_example/` - An example project for integrating Redux with React. Includes a sample `App.js` file and a sample component which is used in `App.js`.