How to use the react-sweet-state.createHook function in react-sweet-state

To help you get started, we’ve selected a few react-sweet-state 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 atlassian / react-sweet-state / examples / advanced-scoped-flow / components / theme.js View on Github external
Store,
  {
    onInit: () => ({ getState, dispatch }) => {
      // this gets currently called also when component remounts
      // so it is important to check state status and apply default only on first mount
      const { color } = getState();
      if (!color) {
        dispatch(actions.change());
      }
    },
  }
);

export const ThemeSubscriber = createSubscriber(Store);

export const useTheme = createHook(Store);
github atlassian / react-sweet-state / examples / performance-test / components / todos.js View on Github external
type FilteredTodosState = $Call<
  typeof getFilteredTodosSelector,
  State,
  TodosFilteredProps
>;

export const TodosFilteredSubscriber = createSubscriber<
  State,
  Actions,
  FilteredTodosState,
  TodosFilteredProps
>(Store, {
  selector: getFilteredTodosSelector,
});

export const useTodosFiltered = createHook<
  State,
  Actions,
  FilteredTodosState,
  TodosFilteredProps
>(Store, {
  selector: getFilteredTodosSelector,
});
github atlassian / react-sweet-state / examples / performance-test / components / todos.js View on Github external
/** Subscribers / Hooks */

const getAllTodosSelector = state => ({
  data: state.order.map(v => state.byId[v]),
  loading: state.loading,
});

export const TodosSubscriber = createSubscriber(
  Store,
  {
    selector: getAllTodosSelector,
  }
);

export const useTodos = createHook(Store, {
  selector: getAllTodosSelector,
});

const getTodosCountSelector = state => ({ count: state.order.length });

export const TodosCountSubscriber = createSubscriber(
  Store,
  {
    selector: getTodosCountSelector,
  }
);

export const useTodosCount = createHook(Store, {
  selector: getTodosCountSelector,
});
github atlassian / react-sweet-state / examples / performance-test / components / todos.js View on Github external
);

export const useTodos = createHook(Store, {
  selector: getAllTodosSelector,
});

const getTodosCountSelector = state => ({ count: state.order.length });

export const TodosCountSubscriber = createSubscriber(
  Store,
  {
    selector: getTodosCountSelector,
  }
);

export const useTodosCount = createHook(Store, {
  selector: getTodosCountSelector,
});

type TodosFilteredProps = {| isDone: boolean |};

const getFilteredTodosSelector = (state: State, props: TodosFilteredProps) => ({
  data: state.order
    .map(v => state.byId[v])
    .filter(t => t.isDone === props.isDone),
  loading: state.loading,
});

type FilteredTodosState = $Call<
  typeof getFilteredTodosSelector,
  State,
  TodosFilteredProps
github atlassian / react-sweet-state / examples / basic-flow / components.js View on Github external
const actions = {
  increment: () => ({ setState, getState }: StoreActionApi) => {
    setState({
      count: getState().count + 1,
    });
  },
};

const Store = createStore({
  initialState,
  actions,
});

export const CounterSubscriber = createSubscriber(Store);

export const useCounter = createHook(Store);
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / form.js View on Github external
initialState,
  actions,
});

export const FormContainer = createContainer(
  Store,
  {
    onUpdate: () => ({ setState }, { remoteUsers }) => {
      setState({ toUsers: remoteUsers });
    },
  }
);

export const FormSubscriber = createSubscriber(Store);

export const useForm = createHook(Store);

export const FormActions = createSubscriber(Store, {
  selector: null,
});

export const useFormActions = createHook(Store, {
  selector: null,
});
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / messages.js View on Github external
add: (message: string) => ({ setState, getState }: StoreActionApi) => {
    setState({
      data: [...getState().data, message],
    });
  },
};

const Store = createStore({
  name: 'messages',
  initialState,
  actions,
});

export const MessagesSubscriber = createSubscriber(Store);

export const useMessages = createHook(Store);
github atlassian / react-sweet-state / examples / basic-ts / components.tsx View on Github external
const actions = {
  increment: () => ({ setState, getState }: StoreActionApi) => {
    setState({
      count: getState().count + 1,
    });
  },
};

const Store = createStore({
  initialState,
  actions,
});

export const CounterSubscriber = createSubscriber(Store);

export const useCounter = createHook(Store);
github atlassian / react-sweet-state / examples / advanced-flow / components / todo / index.js View on Github external
initialState,
  actions,
});

export const TodoContainer = createContainer(
  Store,
  {
    onUpdate: () => ({ dispatch }, { selectedUser }) => {
      if (selectedUser) dispatch(actions.load(selectedUser));
    },
  }
);

export const TodoSubscriber = createSubscriber(Store);

export const useTodo = createHook(Store);
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / form.js View on Github external
{
    onUpdate: () => ({ setState }, { remoteUsers }) => {
      setState({ toUsers: remoteUsers });
    },
  }
);

export const FormSubscriber = createSubscriber(Store);

export const useForm = createHook(Store);

export const FormActions = createSubscriber(Store, {
  selector: null,
});

export const useFormActions = createHook(Store, {
  selector: null,
});

react-sweet-state

Global + local state combining the best of Redux and Context API

MIT
Latest version published 3 months ago

Package Health Score

82 / 100
Full package analysis