npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-redux-restate

v1.3.9

Published

Reform, rewire, restate redux state, or even states

Downloads

11

Readme

(a part of restate project)

The base layer for redux composition.

The problem

As long React spreads component architecture and highly composable patterns, the major part of it - Redux - do not follow this way.

In the world of redux Store is a singlentone. You can create a connection to that store, and fetch the data you need. But how?

Redux is the same for any connection, created from any point of Render Tree.

You have to use React props, to pass the ids you need deeply into react Tree to use them to get the data out of the store.

Redux is not composable. Redux is not component friendly.

The borders

Redux's connect method produces PureComponent. No update from the top will pass PureComponent. All updates will start from PureComponent.

Connect is the end for all updates, and the beginning.

Then you will change the store, all connected component will be triggered to update. They will mapStateToProps and maybe do nothing more, in case the result object is shallowEqual to the older one.

Unless you will specify areStatesEqual for each connect, which is not quite possible, to say the truth.

The solution

Redux-restate get:

  • one or more stores as input,
  • combine function to create a new store
  • dispatch function, to handle dispatch

And produces the new store.

Thus makes redux composable, and enabled the component way.

The implementation

  • redux-restate for redux level.
  • react-redux-retate for react multy-state case.
  • react-redux-focus for single store case.

Usage

redux-restate

import restate from 'redux-restate';
const newStore = restate({ store: baseStore }, composeState, routeDispatch, options);

composeState

get one one more states as input, produce the output

routeDispatch

get one one more dispatch as input, then call the disired one with even, also provided.

react-redux-restate

import reactReduxRestate from 'react-redux-restate';
const RestatedComponent = reactReduxRestate(
  { otherStore: otherStore },
  (stores, props) => composeState,
  (dispatchers, event, props) => routeDispatch,
  options,
)(WrappedComponent);

The same as redux-restate, but in form of React HOC. The default store, accessible with storeKey, is available as .default for next functions.

composeState

get one one more states as input, plus props, produce the output

routeDispatch

get one one more dispatch as input, plus props, then call the disired one with even, also provided.

react-redux-focus

import reactReduxFocus from 'react-redux-focus';
const FocusedComponent = reactReduxFocus(
  (state, props) => state.todos[props.id],
  (dispatch, event, props) => dispatch({ ...event, id: props.id }),
)(WrappedComponent);

The same as react-redux-restate, but for a single store.

Licence

MIT