How to use react-sweet-state - 10 common examples

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-flow / index.js View on Github external
/**
 * Add simple logger middleware
 */
const mw: Middleware = storeState => next => arg => {
  /* eslint-disable no-console */
  console.log(storeState.key, 'changing', arg);
  const result = next(arg);
  console.log(storeState.key, 'changed');
  return result;
};
defaults.middlewares.add(mw);
/**
 * Enable Redux devtools support
 */
defaults.devtools = true;

/**
 * Main App
 */
class App extends Component<{}> {
  render() {
    return (
      <div>
        <h1>User Todos example</h1>
        <main>
          <div>
            <h3>With Render-props</h3>
            
            
          </div>
          <hr></main></div>
github atlassian / react-sweet-state / examples / advanced-flow / index.js View on Github external
import '@babel/polyfill';

import { UserListRpc, UserListHook } from './views/user-list';
import { TodoListRpc, TodoListHook } from './views/todo-list';

/**
 * Add simple logger middleware
 */
const mw: Middleware = storeState =&gt; next =&gt; arg =&gt; {
  /* eslint-disable no-console */
  console.log(storeState.key, 'changing', arg);
  const result = next(arg);
  console.log(storeState.key, 'changed');
  return result;
};
defaults.middlewares.add(mw);
/**
 * Enable Redux devtools support
 */
defaults.devtools = true;

/**
 * Main App
 */
class App extends Component&lt;{}&gt; {
  render() {
    return (
      <div>
        <h1>User Todos example</h1>
        <main>
          <div>
            <h3>With Render-props</h3></div></main></div>
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / theme.js View on Github external
Store,
  {
    onInit: () =&gt; ({ getState, dispatch }) =&gt; {
      // 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 / advanced-scoped-flow / components / theme.js View on Github external
export const ThemeContainer = createContainer(
  Store,
  {
    onInit: () =&gt; ({ getState, dispatch }) =&gt; {
      // 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 / advanced-scoped-flow / components / theme.js View on Github external
const initialState: State = {
  color: '',
};

const actions = {
  change: (value?: string) =&gt; (
    { setState }: StoreActionApi,
    { defaultColor }: ContainerProps
  ) =&gt; {
    setState({
      color: value || defaultColor,
    });
  },
};

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

export const ThemeContainer = createContainer(
  Store,
  {
    onInit: () =&gt; ({ getState, dispatch }) =&gt; {
      // 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());
      }
    },
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / theme.js View on Github external
{ setState }: StoreActionApi,
    { defaultColor }: ContainerProps
  ) =&gt; {
    setState({
      color: value || defaultColor,
    });
  },
};

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

export const ThemeContainer = createContainer(
  Store,
  {
    onInit: () =&gt; ({ getState, dispatch }) =&gt; {
      // 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 / advanced-scoped-flow / index.js View on Github external
// @flow
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { defaults } from 'react-sweet-state';

import '@babel/polyfill';

import { ChatRpc } from './views/chat-rpc';
import { ChatHook } from './views/chat-hook';
/**
 * Enable Redux devtools support
 */
defaults.devtools = true;

/**
 * Main App
 */
class App extends Component&lt;
  {},
  { reset: number, remount: number, remoteUsers: number }
&gt; {
  state = {
    reset: 0,
    remount: 0,
    remoteUsers: 20,
  };

  reset = () =&gt; {
    const reset = this.state.reset + 2;
github atlassian / react-sweet-state / examples / performance-test / components / todos.js View on Github external
type FilteredTodosState = $Call&lt;
  typeof getFilteredTodosSelector,
  State,
  TodosFilteredProps
&gt;;

export const TodosFilteredSubscriber = createSubscriber&lt;
  State,
  Actions,
  FilteredTodosState,
  TodosFilteredProps
&gt;(Store, {
  selector: getFilteredTodosSelector,
});

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

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

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

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

const getTodosCountSelector = state =&gt; ({ 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 =&gt; ({ 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) =&gt; ({
  data: state.order
    .map(v =&gt; state.byId[v])
    .filter(t =&gt; t.isDone === props.isDone),
  loading: state.loading,
});

type FilteredTodosState = $Call&lt;
  typeof getFilteredTodosSelector,
  State,
  TodosFilteredProps

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