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

@enzee/redux-funk

v1.0.7

Published

Function subscribers for Redux.

Downloads

10

Readme

Redux Funk

npm install @enzee/redux-funk
yarn add @enzee/redux-funk

Importing and usage

import {connect} from 'redux-funk';
import {store} from '../where/you/used/createStore';

const greetWho = (state) => "hello" + state.hello;

const mapStateToFuncs = retrieve => ({
    greetWho: retrieve(greetWho)
    //state: state
})

//Usage 1
connectedFunctions = connect(store)(mapStateToFuncs);
connectedFunctions.greetWho();

//Usage 2
export default connect(store)(mapStateToFuncs)
import {greetWho} from './connectedFunctions';
greetWho();

How does it work?

The function mapStateToFuncs recieves the retrieve function as an argument and you use it to wrap it around the functions. You must wrap all functions that you want connected and they must all accept the parameter state as the first parameter! You can then access that state parameter within your function as you see fit. In the highest order component, the Redux store passes down your variables as props and calls for a re-render, which then uses the values returned by your funks. You can renamed your exports within the mapStateToFuncs as well.

Why Do I Need This?

This is my solution to getting data from the Redux store as it updates. There are certain times where a dumb component might need data from the Redux store, but is nested too deeply to pass the data along using props withou causing a mess. Redux-Funk is just a thin wrapper that subscribes to state changes from withing the redux storemaking it immensely useful for grabbing variables from your syore to serve as globals as you send dispatched actions. In all complete honesty, you can replicate most if not all of the functionality yourself by

1)passing down props by drilling down the variables down to the component that needs it or 2)connecting each component to the Redux State wherever they need props.

So why use this?

Redux-Funk was made to for reusability. Similar to how a Redux store is an extension of the concept of a component state, this is an attempt to extend the concept of component props using the Redux state. This builds upon React Redux and allows you to spread and reuse similar information across multiple components. Funks can be reused 100 times, but only subscribed once, making it easier for you to know which part of the state is being used and ensuring the operation done on the data is the same each and every time.

Motivation

Redux-Funk allows setting up global traits of an app super easy. You can easily set up night mode or app-wide settings without having to drill down props to the component that needs them. An example project using React-Redux can be found in examples folder. This module somewhat combines elements of both React-Redux and Redux-Thunk. The usage is similar to the former while the style of usage is similar to the latter. It's moreso an extensiof of React Redux that requires less boilerplate and connecting and allows for more extensibility and reuseability.

Why is it named Funk?

You subscribe functions, which can be shortened to func and a package named thunk already exists and this works similar but not really, so it's all funky.

Future

Feel free to contribute, complain to me about bugs or bug me with complaints. The next step is to add a standalone way to connect to the Redux store without React Redux, and potentitally memoization.

License

MIT