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

@virtuous/react-store

v1.2.4

Published

A state container for React applications.

Downloads

16

Readme

React Store · Build Status Coverage Status GitHub (pre-)release

React Store is a very simple but reliable state container for React applications.

It helps you write React applications that store application state by replicating the way how Redux works with almost the same mechanisms - but completelly without Redux - all done in pure React using React's Context API.

It provides you with React Hooks and React HOCs for you to be able to easily access the store functions and data you need.

Installation

To install the stable version with npm:

npm install --save @virtuous/react-store

To install the stable version with yarn:

yarn add @virtuous/react-store

Setup

The React Store follows the concepts of Redux. This means that the whole state of your app is stored in an object tree inside a React Context.

The only way to change the state tree is to emit an action and then having a reducer applying the changes to the store portion.

To get the store set up, you only need to wrap the store component around your application components and pass in your reducer:

import React from 'react';
import { Store, combineReducers } from '@virtuous/react-store';

// A simple reducer.
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const rootReducer = combineReducers({ counter });

function App() {
  <Store reducer={rootReducer}>
    {/* Your application goes here */}
  </Store>
}

Reducer

A reducer manipulates its own state in response to actions dispatched to the store. This follows the same principles that are described in the original Redux Documentation.

In the above example we see a very simple reducer, that increments or decrements the counter state.

combineReducers()

React Store provides a combineReducers helper that lets you combine multiple reducers together to a more complex state. It works in the exact same way as it is described in the Redux Documentation.

Dispatching actions

There are multiple ways how you can dispatch an action with the React Store.

The easiest is the dispatch() helper, that lets you dispatch an action from anywhere in your code:

import { dispatch } from '@virtuous/react-store';

dispatch(increment({ type: 'INCREMENT' }));

You can use this helper anywhere. Even in React components. It does not to anything else but the store.

If your code is based in React Hooks and you want to continue using this paradigm, you can use the useDispatch() React Hook:

import { useDispatch } from '@virtuous/react-store';

function MyComponent() {
  const dispatch = useDispatch();

  function increment() {
    dispatch({ type: 'INCREMENT' });
  }

  return (
    <button onClick={increment}>Increment</button>
  )
}

There are cases where it does not make sense to write a functional component. Or it is simply not possible. For these rare cases, React Store provides the withDispatch() higher order component:

import React from 'react';
import { withDispatch } from '@virtuous/react-store';

class MyComponent extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  }

  render() {
    return (
      <button onClick={this.increment}>Increment</button>
    )
  }
}

export default withDispatch(MyComponent);

Accessing store data

You might ask yourself "can I still use selectors with this tool?". The answer is YES. Reselect is inspired and meant to be used with Redux, but it is not directly connected to it. Therefore the state and props arguments must not come from Redux. You could in fact store the state completely by your own and still use reselect.

Let's discover the way, how you can access store data in React Store.

Again, the easiest way to do that, is to use the select() helper, that lets you access data from anywhere in you codebase:

import { createSelector } from 'reselect';
import { select } from '@virtuous/react-store';

const getCounter = createSelector(
  state => state.counter
);

const count = select(getCounter);

You can als use the React Hook to access data inside your functional component:

import React from 'react';
import { useSelector } from '@virtuous/react-store';
import { createSelector } from 'reselect';

const getCounter = createSelector(
  state => state.counter
);

function MyComponent() {
  const count = useSelector(getCounter);

  return (
    // The component output.
  )
}

connect()

We understand that is hard to refactor your codebase all at once. Maybe you made the decission to switch from Redux to React Store, but you can't invest the time to get rid of everthing related to Redux. Therefore React Store also provides you with its own implementation of React Redux's connect() Higher Order Component (HOC). We understand that it is very likely that you use this module to connect your Redux store with your React application.

import { createSelector } from 'reselect';
import { connect } from '@virtuous/react-store';

function MyComponent({ increment, decrement, counter }) {
  /* Your component logic */
}

const getCounter = createSelector(
  state => state.counter
);

function mapStateToProps(state) {
  return {
    counter: getCounter(state),
  };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

REMEMBER: We can not provide every functionality that the original react-redux module provides. Therefore the only two arguments the connect() HOC accepts, are mapStateToProps and mapDispatchToProps. It is only meant to help you migrate.