react-redux-hooks

react-redux-hooks

The easiest way to connect redux. Power by react hooks.

Getting Started

Connect to redux in component

Just use useRedux. It would return state and dispatch

import { useRedux } from 'react-redux-hooks';

const ToggleButton = () => {
	const [state, dispatch] = useRedux();

	return (
		<button onClick={() => dispatch({ type: 'TOOGLE' })}>
			{state.toggle ? 'Click to close' : 'Click to open'}
		</button>
	);
};

Top level Provider

Just pass redux store with Provider like react-redux.

import React from 'react';
import { createStore } from 'redux';
import { Provider, useRedux } from 'react-redux-hooks';

const store = createStore((state = { toggle: false }, action) => {
	if (action.type === 'TOOGLE') {
		return { toggle: !state.toggle };
	}

	return state;
});

ReactDOM.render(
	<Provider store={store}>
		<ToggleButton />
	</Provider>,
	document.getElementById('content'),
);

Changelog

0.1.0 (2018-10-26)

Features

• Implement the basic react-redux-hook (0690e3a)