How to use react-tracked - 10 common examples

visibilityFilter: VisibilityFilterType;
};

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

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

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

await sleep(500);
    dispatch({ type: 'DECREMENT' });
  },
};

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

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

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; {

import React, { useState, StrictMode } from 'react';
import ReactDOM from 'react-dom';

import { createContainer } from 'react-tracked';

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

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

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

const App = () =&gt; (

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);

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

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: return state;
  }
};

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

const Counter = () => {
  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; (

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;

};
    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);

userFetchingSaga(),
    delayedDecrementingSaga(),
  ]);
}

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

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

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);