How to use the react-tracked.createContainer function in react-tracked

To help you get started, we’ve selected a few react-tracked examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dai-shi / react-tracked / examples / 07_todolist / src / state.ts View on Github external
visibilityFilter: VisibilityFilterType;
};

const initialState: State = {
  todos: [],
  visibilityFilter: 'SHOW_ALL',
};

const useValue = () => useState(initialState);

export const {
  Provider,
  useUpdate: useSetState,
  useTracked,
  useTrackedState,
} = createContainer(useValue);
github dai-shi / react-tracked / examples / 12_async / src / store.ts View on Github external
await sleep(500);
    dispatch({ type: 'DECREMENT' });
  },
};

const useValue = () => useReducerAsync<
  Reducer,
  AsyncAction,
  AsyncAction | OuterAction
>(reducer, initialState, asyncActionHandlers);

export const {
  Provider,
  useTrackedState,
  useUpdate: useDispatch,
} = createContainer(useValue);
github dai-shi / will-this-react-global-state-work-in-concurrent-mode / src / react-tracked / index.js View on Github external
import React, { useTransition } from 'react';
import { createContainer } from 'react-tracked';

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  initialState,
  reducer,
  ids,
  useCheckTearing,
  shallowEqual,
} from '../common';

const useValue = () => React.useReducer(reducer, initialState);

const { Provider, useSelector, useUpdate: useDispatch } = createContainer(useValue);

const Counter = React.memo(() => {
  const count = useSelector((state) => state.count);
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);

const Main = () =&gt; {
  const dispatch = useDispatch();
  const count = useSelector((state) =&gt; state.count);
  useCheckTearing();
  useRegisterIncrementDispatcher(React.useCallback(() =&gt; {
    dispatch({ type: 'increment' });
  }, [dispatch]));
  const [localCount, localIncrement] = React.useReducer((c) =&gt; c + 1, 0);
  const normalIncrement = () =&gt; {
github dai-shi / react-tracked / examples / 06_customhook / src / index.js View on Github external
import React, { useState, StrictMode } from 'react';
import ReactDOM from 'react-dom';

import { createContainer } from 'react-tracked';

const useValue = () =&gt; {
  const [count, setCount] = useState(0);
  const increment = () =&gt; setCount((c) =&gt; c + 1);
  const decrement = () =&gt; setCount((c) =&gt; c - 1);
  return [count, { increment, decrement }];
};

const { Provider, useTracked } = createContainer(useValue);

const Counter = () =&gt; {
  const [count, actions] = useTracked();
  return (
    <div>
      <span>Count: {count}</span>
      <button type="button">+1</button>
      <button type="button">-1</button>
    </div>
  );
};

const App = () =&gt; (
github dai-shi / react-tracked / examples / 03_usestate / src / state.ts View on Github external
import { useState } from 'react';

import { createContainer } from 'react-tracked';

const initialState = {
  count: 0,
  person: {
    age: 0,
    firstName: '',
    lastName: '',
  },
};

const useValue = () => useState(initialState);

export const { Provider, useTracked } = createContainer(useValue);
github dai-shi / react-tracked / examples / counter-react-tracked / src / App.js View on Github external
const initialState = {
  count: 0,
  text: '',
};

const reducer = (state, action) =&gt; {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    case 'setText': return { ...state, text: action.text };
    default: return state;
  }
};

const useValue = () =&gt; useReducer(reducer, initialState);
const { Provider, useTracked } = createContainer(useValue);

const Counter = () =&gt; {
  const [state, dispatch] = useTracked();
  return (
    <div>
      <span>Count: {state.count}</span>
      <button type="button"> dispatch({ type: 'increment' })}&gt;+1</button>
      <button type="button"> dispatch({ type: 'decrement' })}&gt;-1</button>
    </div>
  );
};

const App = () =&gt; (
github dai-shi / react-tracked / examples / 01_minimal / src / index.js View on Github external
import React, { useReducer, StrictMode } from 'react';
import ReactDOM from 'react-dom';

import { createContainer } from 'react-tracked';

const useValue = ({ reducer, initialState }) => useReducer(reducer, initialState);
const { Provider, useTracked } = createContainer(useValue);

const initialState = {
  count: 0,
  text: 'hello',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    case 'setText': return { ...state, text: action.text };
    default: throw new Error(`unknown action type: ${action.type}`);
  }
};

let numRendered = 0;
github dai-shi / react-tracked / examples / 02_typescript / src / state.ts View on Github external
};
    case 'setAge': return {
      ...state,
      person: {
        ...state.person,
        age: action.age,
      },
    };
    default:
      throw new Error('unknown action type');
  }
};

const useValue = () => useReducer(reducer, initialState);

export const { Provider, useTracked } = createContainer(useValue);
github dai-shi / react-tracked / examples / 13_saga / src / store.ts View on Github external
userFetchingSaga(),
    delayedDecrementingSaga(),
  ]);
}

const useValue = () =&gt; useSagaReducer(
  rootSaga,
  reducer as Reducer,
  initialState,
);

export const {
  Provider,
  useTrackedState,
  useUpdate: useDispatch,
} = createContainer(useValue);
github dai-shi / react-tracked / examples / 09_reactmemo / src / store.ts View on Github external
todos: state.todos.map((todo) => (
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        )),
      };
    default:
      return state;
  }
};

const useValue = () => useReducer(reducer, initialState);

export const {
  Provider,
  useTrackedState,
  useUpdate: useDispatch,
} = createContainer(useValue);

react-tracked

State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.

MIT
Latest version published 2 months ago

Package Health Score

80 / 100
Full package analysis