A simple, lightweight react-redux alternative, written in TypeScript.

Usage no npm install needed!

<script type="module">
  import reactReduxNano from '';



Minified + gzipped size NPM version License Stars Watchers

A simple, lightweight react-redux alternative, written in TypeScript.

Why use react-redux-nano

  • Very lightweight (see the badges above for the latest size).
  • All hooks are compatible to react-redux
  • Only has two peer dependencies:
    • React 16.8.0 or higher
    • Redux 4.0.0 or higher
  • Using hooks to access redux in react is soo much cleaner than using react-redux's connect higher order component.
  • Liberal license: zlib/libpng

Installation via NPM

npm i react-redux-nano

This library is shipped as es2015 modules. To use them in browsers, you'll have to transpile them using webpack or similar, which you probably already do.


Creating a Provider

import { Provider } from "react-redux-nano";
export const App = () => (
    <Provider store={store}>

Dispatching an action

import { useDispatch } from "react-redux-nano";
export const MyComponent = () => {
    const dispatch = useDispatch();

    return <button onClick={() => dispatch(subscribeAction())}>Subscribe</button>;

Getting State

import { useSelector } from "react-redux-nano";

const selectTitle = (state: State) => state.title;

export const MyComponent = () => {
    const title = useSelector(selectTitle);

    return <h2>{title}</h2>;

Getting State with a comparison function

useSelector will detect changes in the value returned by the selector function by comparing the old value and the new value by reference. Only if they differ, the component will be re-rendered.

If you want more controll, you can pass in a comparison function:

import { useSelector } from "react-redux-nano";

const selectUsers = (state: State) => state.users;

const sameMembersInArray = (a: User[], b: User[]) => {
    if (a.length !== b.length)
        return false;
    return a.every((value, index) => value === b[index]);

export const MyComponent = () => {
    const users = useSelector(selectUsers, sameMembersInArray);

    return <ul>{ => <li key={}>{}</li>)}</ul>;

Accessing the store itself

In some rare occasions, you might want to access the store object itself.

import { useStore } from "react-redux-nano";
export const MyComponent = () => {
    const store = useStore();
    // ...

Gradually moving to react-redux-nano

This library defines a different provider, which works the same way, but it does not provide the redux store to react-redux. So using the original hooks and connect functions from react-redux won't work.

If you want to gradually move code from react-redux to react-redux-nano, you can just add Providers of both libraries. I.e.:

import { Provider } from "react-redux-nano";
import { Provider as LegacyProvider } from "react-redux";
export const App = () => (
    <Provider store={store}>
        <LegacyProvider store={store}>

Report issues

Something not working quite as expected? Do you need a feature that has not been implemented yet? Check the issue tracker and add a new one if your problem is not already listed. Please try to provide a detailed description of your problem, including the steps to reproduce it.


Awesome! If you would like to contribute with a new feature or submit a bugfix, fork this repo and send a pull request. Please, make sure all the unit tests are passing before submitting and add new ones in case you introduced new features.


react-redux-nano has been released under the zlib/libpng license, meaning you can use it free of charge, without strings attached in commercial and non-commercial projects. Credits are appreciated but not mandatory.