# react-redux-saga-boilerplate

> react-redux-saga-biolerplate

Latest version **1.0.5** (published 2020-08-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-redux-saga-boilerplate
pnpm add react-redux-saga-boilerplate
yarn add react-redux-saga-boilerplate
bun add react-redux-saga-boilerplate
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-08-28 |
| First published | 2020-08-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Manish |
| Maintainers | manishaggarwalm |
| Keywords | react, redux, saga, boilerplate, react-redux-saga-boilerplate |

## Links

- npm: https://www.npmjs.com/package/react-redux-saga-boilerplate
- Repository: https://github.com/manishaggarwalm/react-redux-saga-boilerplate
- Homepage: https://github.com/manishaggarwalm/react-redux-saga-boilerplate#readme
- Issues: https://github.com/manishaggarwalm/react-redux-saga-boilerplate/issues
- npm.io page: https://npm.io/package/react-redux-saga-boilerplate

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [redux](https://npm.io/package/redux.md) ^4.0.5
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.1
- [source-map-loader](https://npm.io/package/source-map-loader.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-08-28
- 1.0.4 — 2020-08-28
- 1.0.3 — 2020-08-28
- 1.0.2 — 2020-08-27
- 1.0.0 — 2020-08-27

## README

# react-redux-saga-boilerplate

[![Dependencies Status](https://david-dm.org/manishaggarwalm/react-redux-saga-boilerplate.svg)](https://www.npmjs.com/package/react-redux-saga-boilerplate)
[![Version Status](https://badge.fury.io/js/react-redux-saga-boilerplate.svg)](https://www.npmjs.com/package/react-redux-saga-boilerplate)
[![Download Status](https://img.shields.io/npm/dt/react-redux-saga-boilerplate.svg)](https://www.npmjs.com/package/react-redux-saga-boilerplate)

This boilerplate contain a ready to go **react application** with **redux** and **Saga** as middleware.

## How to Run

1. Download the package on local

```
git clone https://github.com/manishaggarwalm/react-redux-saga-boilerplate.git
```

2. Run following command to install dependencies

```
npm install
```

3. Execute to run application in dev mode

```
npm run dev
```

The dev server will run on `http://localhost:3000`

## Redux

Redux is a predictable state container for JavaScript apps. (Not to be confused with a WordPress framework – Redux Framework.)
Redux has 4 major components:

1. Action Types
2. Actions
3. Reducers
4. Middleware like thunk, saga(where we handle api calls and other complex logics)

### What are Action Types and How to define Action Types?

Action Types are tiny part of application but are major building block of Redux Application.

```
const CREATE_ITEM = "CREATE_ITEM";
```

or you can use it like an object structure

```
export const Types = {
  CREATE_ITEM: "CREATE_ITEM",
  DELETE_ITEM: "DELETE_ITEM",
};
```

It should be **unique** throughout the application.

### What are Actions and How to define Actions?

Actions are something that orchestras the whole flow of application, with the help of actions we can modify the data in the store or perform some operations like API calls, remove data from store.

we can simply define action as:

```
const createItem = (task) => ({
  type: Types.CREATE_ITEM,
  payload: task,
});
```

It should be object with two keys, one `type` and other `payload`, you can use any name here for the keys but to make it consistent we use type and payload (The use of `type` and `payload` will come in `reducers`)

or, Alternatively you can use `redux-actions`

```
npm install redux-actions
```

```
import { createActions } from 'redux-actions';

const CREATE_ITEM = "CREATE_ITEM";
const createItem = createActions(CREATE_ITEM)

```

## Dependencies

1. "react": "^16.13.1"
2. "react-dom": "^16.13.1"
3. "react-redux": "^7.2.1"
4. "redux": "^4.0.5"
5. "redux-saga": "^1.1.3"
6. "source-map-loader": "^1.0.2"

## DevDependencies

1. "@babel/core": "^7.11.4",
2. "@babel/plugin-proposal-class-properties": "^7.10.4",
3. "@babel/plugin-transform-runtime": "^7.11.0",
4. "@babel/preset-env": "^7.11.0",
5. "@babel/preset-react": "^7.10.4",
6. "babel-loader": "^8.1.0",
7. "css-loader": "^4.2.2",
8. "html-webpack-plugin": "^4.3.0",
9. "path": "^0.12.7",
10. "style-loader": "^1.2.1",
11. "webpack": "^4.44.1",
12. "webpack-cli": "^3.3.12",
13. "webpack-dev-server": "^3.11.0"

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