A redux like store managed by rxjs.
npm install @alekna/react-storeasync redux type store for react with rxjs touch.
[![size][size-badge]][unpkg-lib]
[![gzip size][gzip-badge]][unpkg-lib]
npm i @alekna/react-store
> Example
Works just like react useReducer, but dispatcher can also handle promises and observables
``jsx
import React from 'react';
import { render } from 'react-dom';
import { interval } from 'rxjs';
import { map, take, startWith } from 'rxjs/operators';
import { useAsyncReducer } from '@alekna/react-store';
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
function reducer(state = { count: 0 }, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
const App = () => {
const [state, dispatch] = useAsyncReducer(reducer);
return (
<>
render(
`
`jsx
import React from 'react';
import { render } from 'react-dom';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { useStore, createStore } from '@alekna/react-store';
const onChange = text => () => {
return of({
type: 'onChange',
payload: text,
}).pipe(delay(1000));
};
function reducer(state = { text: '' }, action) {
switch (action.type) {
case 'onChange':
return {
...state,
text: state.text.concat(action.payload.slice(-1)),
};
default:
return state;
}
}
const storeConfig = createStore(reducer);
function App() {
const { state, dispatch } = useStore(storeConfig);
return (
render(
`
`jsx
import React from 'react';
import { render } from 'react-dom';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
import StoreProvider, { createStore, useSelector } from '@alekna/react-store';
const onChange = text => () => {
return of({
type: 'onChange',
payload: text,
}).pipe(delay(1000));
};
function reducer(state = { text: '' }, action) {
switch (action.type) {
case 'onChange':
return {
...state,
text: state.text.concat(action.payload.slice(-1)),
};
default:
return state;
}
}
const storeConfig = createStore(reducer);
function App() {
return (
{({ dispatch }) => (
Start typing bellow
)}
);
}
function Input({ dispatch }) {
const text = useSelector(state => state.text);
return (
value={text}
placeholder="your input will be delayed by 1sec"
onChange={evt => dispatch(onChange(evt.target.value))}
/>
);
}
render(
``
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square
[size-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?label=size&style=flat-square
[unpkg-lib]: https://unpkg.com/@alekna/react-store@1.0.5/lib