Skip to content
Easy React bindings for Redux with Hooks API
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
examples
src add eslint-plugin-react-hooks Mar 20, 2019
.eslintrc.json add eslint-plugin-react-hooks Mar 20, 2019
.gitignore
.travis.yml initial commit Nov 15, 2018
CHANGELOG.md
LICENSE v0.9.0; useReduxStateSimple Jan 10, 2019
README.md update README Mar 12, 2019
package-lock.json
package.json add eslint-plugin-react-hooks Mar 20, 2019
tsconfig.json
webpack.config.js v0.9.2; from tslint to eslint Jan 24, 2019

README.md

react-hooks-easy-redux

Build Status npm version bundle size

Easy React bindings for Redux with Hooks API

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 for beginners. 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 re-renders components.

Install

npm install react-hooks-easy-redux

Usage

import React from 'react';
import { createStore } from 'redux';
import {
  ReduxProvider,
  useReduxDispatch,
  useReduxState,
} from 'react-hooks-easy-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>
);

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03 04 05 06 07 08 09

Blogs

You can’t perform that action at this time.