https://github.com/martynaskadisa/redux-utils

Tiny type-safe redux utilities to make your life easier
https://github.com/martynaskadisa/redux-utils

redux typescript utilities

Last synced: 2 months ago
JSON representation

Tiny type-safe redux utilities to make your life easier

• Host: GitHub
• URL: https://github.com/martynaskadisa/redux-utils
• Owner: martynaskadisa
• License: mit
• Created: 2019-03-20T07:33:51.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T18:15:52.000Z (about 2 years ago)
• Last Synced: 2024-10-29T01:14:36.782Z (2 months ago)
• Topics: redux, typescript, utilities
• Language: TypeScript
• Homepage:
• Size: 1.81 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

        
# redux-utils

[![Build Status](https://travis-ci.com/martynaskadisa/redux-utils.svg?branch=master)](https://travis-ci.com/martynaskadisa/redux-utils)

[![minified size](https://badgen.net/bundlephobia/min/@reduxify/utils)](https://bundlephobia.com/result?p=@reduxify/utils)

[![minzipped size](https://badgen.net/bundlephobia/minzip/@reduxify/utils)](https://bundlephobia.com/result?p=@reduxify/utils)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Tiny type-safe redux utilities to make your life easier

## Installing

```bash

yarn add @reduxify/utils

```

## Usage

### createActionCreator

`createActionCreator
(type: string): (payload: P, meta: M) => { type: string, payload: P, meta: M }`

Action creator factory. Accepts `type` as first argument and returns an action creator which accepts two arguments - `payload` and `meta`.

```ts

import { createActionCreator } from '@reduxify/utils'

const add = createActionCreator('ADD');

dispatch(add(5)) //=> { type: 'ADD', payload: 5 }

const openCalendar = createActionCreator('OPEN_CALENDAR');

dispatch(openCalendar()) //=> { type: 'OPEN_CALENDAR' }

const throttledAdd = createActionCreator('ADD');

dispatch(throttledAdd(5, { throttle: 100 })) //=> { type: 'ADD', payload: 5, meta: { throttle: 100 }}

```

This utility has one extra feature - `toString()` method returns action's type. So action creator can be used everywhere instead of an action type constant, even in reducers or sagas:

```ts

import { createActionCreator } from '@reduxify/utils';

const openDropdown = createActionCreator('OPEN_DROPDOWN');

console.log(openDropdown) //=> 'OPEN_DROPDOWN'

// Example reducer

const reducer = (state, action) => {

  switch(action.type) {

    case openDropdown.toString():

      return action.payload;

    default:

      return state;

  }

}

// Example saga

function* saga() {

   const action = yield take(openDropdown);

}

```

### createReducer

`createReducer(defaultState: S, ...reducersMap: Array>>)`

Reducer creator. Accepts default state as first argument and reducers map as n-th argument.

```ts

import { createActionCreator, createReducer, reduce } from '@reduxify/utils';

const openCalendar = createActionCreator('OPEN_CALENDAR');

const closeCalendar = createActionCreator('OPEN_CALENDAR');

const incrementBy = createActionCreator('INCREMENT_BY');

const reducer = createReducer(

    { open: false, count: 0 },

    reduce(openCalendar, (state, action) => ({ ...state, open: true })),

    reduce(closeCalendar, (state, action) => ({ ...state, open: false })),

    reduce(incrementBy, (state, action) => ({ ...state, count: state.count + action.payload }))

)

```

```ts

import { createReducer } from '@reduxify/utils';

const reducer = createReducer(true, {

    'OPEN_CALENDAR': (state, action) => true,

    'CLOSE_CALENDAR': (state, action) => false

})

```

```ts

import { createReducer } from '@reduxify/utils';

const reducer = createReducer(true, 

    {

        'OPEN_CALENDAR': (state, action) => true

    }, 

    {

        'CLOSE_CALENDAR': (state, action) => false

    }

)

```

### reduce

`reduce(actionCreator:(...args: any[]) => A,

  reducer: Reducer

): Record>`

Reduce actions with full type information from action creators. This utility essentially creates a reducers map object. It's main purpose is to provide full type information from action creator for type safe reducers.

```ts

import { reduce, createActionCreator } from '@reduxify/utils';

const add = createActionCreator('ADD');

const reducersMap = reduce(add, (state, action) => state + action.payload) 

// reducersMap = { 'ADD': (state, action) => state + action.payload }

```

### Helpers

#### set

```

set(state: any, action: Action) => Payload

```

Sets action's payload unconditionally

```ts

import { createActionCreator, createReducer, reduce, set } from '@reduxify/utils';

const setTitle = createActionCreator('SET_TITLE');

const reducer = createReducer('', 

  reduce(setTitle, set)

);

// Initial state:

// ''

dispatch(setTitle('Awesome title'));

// Updated state:

// 'Awesome title'

```

#### merge

```

merge(state: object, action: Action) => object

```

Spreads action's payload over state

```ts

import { createActionCreator, createReducer, reduce, merge } from '@reduxify/utils';

interface User {

  name: string;

  surname: string;

  address: string;

}

const updateUser = createActionCreator>('UPDATE_USER');

const reducer = createReducer({ name: 'Jon', surname: 'Snow', address: `Night's watch` },

  reduce(updateUser, merge)

);

// Initial state:

// {

//   name: 'Jon',

//   surname: 'Snow',

//   address: `Night's watch`

// }

dispatch(updateUser({ address: 'Winterfell' });

// Updated state:

// {

//   name: 'Jon',

//   surname: 'Snow',

//   address: 'Winterfell'

// }

```

## Licence

MIT