Create Redux State At Run Time

use-redux-states

Create redux state at runtime.

Overview

use-redux-states 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-states

Setup

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

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-states'

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

Examples

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