welldone-software / redux-toolbelt

Toolbelt for redux applications

Redux Toolbelt

A set of tools for quicker, easier, less verbose and safer Redux development by welldone-software.

Packages

This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:

Package	Description
redux-toolbelt	Core utillities for creating action creators and reducers
redux-toolbelt-immutable-helpers	Helper functions to "update" immutable objects
redux-toolbelt-observable	Utilities for using redux-toolbelt with redux-observable
redux-toolbelt-saga	Utilities for using redux-toolbelt with redux-saga
redux-toolbelt-thunk	Utilities for using redux-toolbelt with redux-thunk

Article

Read about redux-toolbelt here

Demo

A demo project can be found here:

https://github.com/welldone-software/redux-toolbelt-demo

The demo can be run in a live sandbox environment here:

https://codesandbox.io/s/github/welldone-software/redux-toolbelt-demo

Typing

Package now supports typescript.

redux-toolbelt's Issues

make the IDE complete action creator params

here is an example of how it is now:
https://imgur.com/a/0W5E9

we use "defaultMeta" in "makeThunkAsyncActionCreator" instead of just "meta"

i think both should be available

add readme and tests to redux-toolbelt-thunk

redux-toolbelt-thunk imports from "../../redux-toolbelt/src"

the import when built should be from '../../redux-toolbelt/lib/makeAsyncActionCreator'.

but now, in packages/redux-toolbelt-thunk/lib/makeThunkAsyncActionCreator.js, it imports from the not compiled '../../redux-toolbelt/src/makeAsyncActionCreator':

the "makeArray" function returns a new array if passed an array

its immutable helpers. i expected to get the same object.

Development diagnostics should be dropped from production version

Diagnostics like this one are not helpful in production versions. It is better to drop them conditionally:

if (process.env.NODE_ENV !== 'production') {
 // diagnostics
}

When minimized for production by the final developer, it will be dropped as it is dead code.
The version of this utility published on npm should not be packed in production mode so the final developer gets this diagnostics.

upsertItemsById doesn't add new items if no items are updated

The source

  let hasChanges = false
  const result = arr.map(item => {
    const itemId = idSelector(item)
    if (!updatedItemsMap.has(itemId)) {
      return item
    }
    const updatedItem = updatedItemsMap.get(itemId)
    updatedItemsMap.delete(itemId)
    if (isMatch(item, updatedItem)) {
      return item
    }
    hasChanges = true // this only happens if an update is made to existing items
    return {...item, ...updatedItem}
  })
  updatedItemsMap.forEach(item => result.push(item)) // adds to result

  return hasChanges ? result : arr // if no item is made, results is not used

I tried to use this to add items by id,

  makeReducer(actions.addSoldier,
    (state, {payload}) => upsertItemsById (state, payload, ({name}) => name)

where f.e

state = [
    {name: 'bar', prop: 'asd'},
    {name: 'foo', prop: 'dfg'},
]

payload = {name: 'baz'}

"makeReducer received an unexpected input." is a too general error

make it scream about the specific input problem

Missing documantion about makeThunkAsyncActionCreator

Add documantions like in here
https://medium.com/welldone-software/redux-toolbelt-supercharge-your-redux-ec16e704fe93

and make sure to mention that we have to use
import thunk from 'redux-thunk';
and add it to the middleware for using makeThunkAsyncActionCreator

Provide UMD builds for work with browser based apps

This is an awesome library, I want to implement it in a project based on Polymer 2, so I need a namespace to use it; like Redux and Redux-saga does.

Thanks

"makeAsyncReducer" wont handle the "cancel" action

is it ok? are we handling the failure action that is omitted upon cancel?

Add .npmignore files to exclude test and source files

Currently all the test and source files are installed along the transpiled files in /lib, which is, I believe, all the developer needs.

Since the packages exist as separate entities in npm, I am not aware that the current root .npmignore has any effect at all. Npm searches for .npmignore files at the project root (in this case, each package root) and its subdirectories, but it does not search parent directories. This can be tested via npm pack. The command lerna exec npm pack will create tar-files in each package root to prove this.

As stated in this Lerna issue it is better to place .npmignore files in each package.

re-fire the same asyncAction that failed

Hi,
First of all, Thank you for this great package!

Now, My problem is: I need to re-fire the same asyncAction that failed (with the same payload, after changing the local storage accessToken value).
How can i do it with out adding it as a metaData to each action?

*userFireAccessToken is just a selector for the refreshed token.

  export const onUnauthorizedResponse = (action$, state$) =>
  action$.pipe(
    switchMap(({type, payload}) => {
      if (type.endsWith('ASYNC_FAILURE') && payload?.response?.status === 401) {
        if(userFireAccessToken(state$.value) && localStorage.getItem('accessToken') !== userFireAccessToken(state$.value)){
          localStorage.setItem('accessToken', userFireAccessToken(state$.value));
          return [
            /// HERE I WANT TO REFIRE THE LAST ACTION (THE ONE THAT FAILD) WITH THE SAME PAYLOAD 
          ];
        }
      }
      return [];
    }),
  );

add original args/payload to meta of async derived actions

The derived actions such as success and failure sometime need access to the original action args.

For examples, if we add an item to a list in an async manner, the local index is not available in the server response (the payload we get from the server), even if you use an id, it might not be available or changed by the server. The id/index is certainly not available if an error is raised.

To be able to access the original parameters of the action in the reducers of the derived actions, we need to pass it in the meta.

This should be done in the binding layer, and for each binding (thunk, saga, observable) as it fits it best.

add the option to transform resolve and reject of redux-toolbelt-thunk created action

currently, we can do:

const actionCreator = makeThunkAsyncActionCreator('aaa', fn)
dispatch(actionCreator('aaa')).then(...).catch(...)

and the then and catch results will be the result or error of "fn".

it would be nice if we can decide what to return in this promise.

an initial implementation is available here:
https://github.com/welldone-software/redux-toolbelt/tree/transform-promise-results

but it has to be tested, documented and maybe improved.

Add a `Development` section in README

There should be a Development section, stating all required steps to set up the repo after cloning.

F.e: the fact that you have to use yarn instead of npm initially to make the libraries compile properly.

I want basically this api

const { type, action, reducer } = create({ action: 'action', initialState: false });

TypeScript definition file

great work!

Is there a typescript definition file available or planned?

tx
Bart

fix the JSDocs of "makeThunkAsyncActionCreator"

look at how "makeAsyncActionCreator" is defined

allow the control of meta in success and failure of "makeThunkAsyncActionCreator"

look at the initial implementation in
https://github.com/welldone-software/redux-toolbelt/tree/improve-response-meta-calculation

add tests and documentation