https://github.com/xenit-eu/redux-utils

https://github.com/xenit-eu/redux-utils

finder redux redux-thunk typescript

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/xenit-eu/redux-utils
• Owner: xenit-eu
• License: lgpl-3.0
• Created: 2020-03-27T09:22:15.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T05:11:08.000Z (about 1 year ago)
• Last Synced: 2024-11-07T10:32:20.386Z (about 2 months ago)
• Topics: finder, redux, redux-thunk, typescript
• Language: TypeScript
• Homepage:
• Size: 1.09 MB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# Redux utilities

Utilities for working with [Redux](https://redux.js.org/) (extensions on top of [Redux toolkit](https://redux-toolkit.js.org/))

## Functions

### Redux Toolkit extensions

#### `createAsyncReducer`

Creates a standard set of reducers for [RTK `createAsyncThunk`](https://redux-toolkit.js.org/api/createAsyncThunk) that only handles a single object at a time.

```typescript

const selectDocument = createAsyncThunk("selectDocument", (documentId: string) => fetch("/api/documents/"+documentId));

const selectedDocumentReducer = createAsyncReducer(

    null as IDocument | null, // Initial state

    selectDocument, // Return value of createAsyncThunk

    (state, action) => action.payload, // Reducer in case of success (defaults to replacing the state with the payload)

    (builder) => {

        // Add additional reducers here. These reducers handle the full state created by `createAsyncReducer`

    }

)

```

#### `withTypedPayload()`

Creates an action payload creator with a certain type to be used with [RTK `createAction`](https://redux-toolkit.js.org/api/createAction)

```typescript

interface ISomeActionPayload {

    someValue1: string;

    someValue2: number;

}

const action = createAction("action/named", withTypedPayload());

```

### Store watcher

The store watcher allows subscribing to changes in a slice of the redux state.

#### `createWatcher`

Creates a watcher for a slice of store state.

```typescript

// Create a watcher

const selectedDocumentWatcher = createWatcher(selectedDocument, (newDocument, previousDocument, { dispatch, store }) => {

    // Do something with the changed state

});

// Subscribe the watcher to the store

const unsubscribe = selectedDocumentWatcher(store);

// Unsubscribe the watcher from the store

unsubscribe();

```

#### `combineWatchers`

Combines a list of watchers into one. Similar to [`combineReducers`](https://redux.js.org/api/combinereducers/)

```typescript

// Combine a bunch of watchers into one watcher that can be subscribed to the store.

const watcher = combineWatchers(someWatcher, someOtherWatcher, aThirdWatcher);

watcher(store);

```

## Local Development

Below is a list of commands you will probably find useful.

### `npm start` or `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

### `npm run build` or `yarn build`

Bundles the package to the `dist` folder.

The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.

By default, runs tests related to files changed since the last commit.