Reactive-react-redux NPM

reactive-react-redux

React Redux binding with React Hooks and Proxy

Introduction

This is a React bindings library for Redux with Hooks API. There are many such libraries, but this one is specialized for auto-detecting state usage with Proxy.

The official React bindings for Redux is react-redux. While its connect is fine tuned for performance, writing a proper mapStateToProps function is sometimes difficult, and improper mapStateToProps can easily lead performance issues. This library eliminates writing mapStateToProps at all.

How it works

A hook useReduxState returns the entire Redux state object, but it keeps track of which properties of the object are used in rendering. When the state is updated, this hook checks whether used properties are changed. Only if it detects changes in the state, it triggers re-rendering.

Install

npm install reactive-react-redux

Usage

import React from 'react';
import { createStore } from 'redux';
import {
  ReduxProvider,
  useReduxDispatch,
  useReduxState,
} from 'reactive-react-redux';

const initialState = {
  counter: 0,
  text: 'hello',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'increment': return { ...state, counter: state.counter + 1 };
    case 'decrement': return { ...state, counter: state.counter - 1 };
    case 'setText': return { ...state, text: action.text };
    default: return state;
  }
};

const store = createStore(reducer);

const Counter = () => {
  const state = useReduxState();
  const dispatch = useReduxDispatch();
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count:{state.counter}</span>
        <button type="button" onClick={() => dispatch({ type: 'increment' })}>+1</button>
        <button type="button" onClick={() => dispatch({ type: 'decrement' })}>-1</button>
      </div>
    </div>
  );
};

const TextBox = () => {
  const state = useReduxState();
  const dispatch = useReduxDispatch();
  return (
    <div>
      {Math.random()}
      <div>
        <span>Text:{state.text}</span>
        <input value={state.text} onChange={event => dispatch({ type: 'setText', text: event.target.value })} />
      </div>
    </div>
  );
};

const App = () => (
  <ReduxProvider store={store}>
    <h1>Counter</h1>
    <Counter />
    <Counter />
    <h1>TextBox</h1>
    <TextBox />
    <TextBox />
  </ReduxProvider>
);

Advanced Usage

import React, { useCallback } from 'react';
import { useReduxSelectors } from 'reactive-react-redux';

const globalSelectors = {
  firstName: state => state.person.first,
  lastName: state => state.person.last,
};

const Person = () => {
  const { firstName } = useReduxSelectors(globalSelectors);
  return <div>{firstName}</div>;
  // this component will only render when `state.person.first` is changed.
};

const Person2 = ({ threshold }) => {
  const { firstName, isYoung } = useReduxSelectors({
    ...globalSelectors,
    isYoung: useCallback(state => (state.person.age < threshold), [threshold]),
  });
  return <div>{firstName}{isYoung && '(young)'}</div>;
};