React Hooks Easy Redux v1.0.0 for React 16.8: unofficial React bindings for Redu...
source link: https://www.tuicool.com/articles/hit/MBBVVfN
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-hooks-easy-redux
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
Blogs
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK