This package has been deprecated

Author message:

This package has been renamed to use-redux-states

use-redux-state-hook

⚠️ This package has been renamed to use-redux-states: Please install use-redux-states instead!

Create runtime redux state

Overview

use-redux-state-hook allows you to create runtime redux states for your components without explicitly creating actions and reducers. It was also designed to solve react's unnecessary re-render issue by using useMemoSelector api.

It returns object which includes a setState function that uses same concept as react's class component setState function which accepts callback(previous_state) or new state value.

Install

npm install --save use-redux-state-hook

Setup

import { createStore } from 'redux'
import yourReducer1 from './yourReducer1'
import yourReducer2 from './yourReducer2'
import { setConfig, mergeReducers } from 'use-redux-state-hook'

const appReducer = mergeReducers({ yourReducer1, yourReducer2 })

const store = createStore(appReducer)
setConfig({cleanup: false})

Basic Usage

import React, { Component } from 'react'

import { useReduxState, useMemoSelector } from 'use-redux-state-hook'

const Usage = () => {
  const { selector, setState } = useReduxState('component_state', {
    /* initial states */
    count: 1,
    locale: 'en_US'
  })

  const { locale, count } = useMemoSelector(selector)

  return (
    <div>
      <h6>Current Count: {count}</h6>
      <input
        onChange={({ target: { value: locale } }) => setState({locale})}
        value={locale}
      />
      <button
        onClick={() =>
          setState((prevState) => ({ ...prevState, count: count + 1 }))
        }
      >
        Increment Count
      </button>
    </div>
  )
}

Extensive Doc at

User Redux State Doc

Example

React Web Code Sandbox Example

Code Sandbox Example

React Native Snack Example

Snack Example

React Native Snack GiftedChat Example

Snack GiftedChat Example

License

MIT © myckhel