# redux-type-actions

> Make redux actions easy to write and strong typed!

Latest version **1.1.0** (published 2019-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-type-actions
pnpm add redux-type-actions
yarn add redux-type-actions
bun add redux-type-actions
```

## 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 | 1.1.0 |
| Published | 2019-12-31 |
| First published | 2018-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | sunnylqm |
| Maintainers | sunnylqm |
| Keywords | redux, action, typescript |

## Links

- npm: https://www.npmjs.com/package/redux-type-actions
- Repository: https://github.com/sunnylqm/redux-type-actions
- Homepage: https://github.com/sunnylqm/redux-type-actions#readme
- Issues: https://github.com/sunnylqm/redux-type-actions/issues
- npm.io page: https://npm.io/package/redux-type-actions

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-12-31
- 1.0.1 — 2019-03-17
- 1.0.0 — 2018-12-20

## README

# redux-type-actions ![npm version](https://img.shields.io/npm/v/redux-type-actions.svg)

Make redux actions easy to write and type-safe!
No more `"UGLY_UPPER_CASE_UNDERSCORE_ACTION"` and bring `auto complete` to the redux world!

![](https://user-images.githubusercontent.com/615282/50281670-3654c080-048b-11e9-8ff9-ffbee9f193c6.gif)

### Installation

```
yarn add redux-type-actions
```

You don't need any configurations for react-native typescript projects. But if you don't have one,

```
# Create a new react-native project with typescript support
react-native init MyProject --template typescript
```

Configurations for web are WIP.

### Usage

```typescript
// actions.ts
import {
  ActionValue,
  createAction,
  createActions,
  NoArgAction,
  NumberAction,
  StringAction,
  ToggleAction,
} from 'redux-type-actions';

// Declare your actions like this
const actions = createActions({
  pretendToFetch: NoArgAction,
  showLoading: StringAction,
  updateProgress: NumberAction,

  // Complex object action
  showResult:
    createAction<{ text: string; time: Date }>(),
});

// Export your action value type for reducers
export type ActionValueType
  = ActionValue<typeof actions>;

export default actions;
```

```typescript
// reducers.ts
import { ActionValueType } from './actions';

function reducers(state,
   action: ActionValueType) {  // <- ActionValueType
  switch (action.type) {
    case 'showResult':
      const { text, time } = action.payload;
      return {
        ...state,
        resultText: `${text} sent on ${time.toLocaleDateString()}`
      }
    default:
      return state;
  }
}
```


```typescript
// sagas.ts
import { delay, fork, put, take } from 'redux-saga/effects';
import actions from './actions';

function* watchPretendToFetch() {
  while (true) {
    yield take(actions.pretendToFetch);
    yield put(actions.showLoading('Now Loading...'));
    yield delay(3000);
    yield put(actions.updateProgress(50));
    yield delay(3000);
    yield put(actions.updateProgress(100));
    yield put(
      actions.showResult({
        text: 'Hello',
        time: new Date(),
      }),
    );
  }
}
```

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