How to use the react-sweet-state.createContainer 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.

github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / theme.js View on Github external
{ setState }: StoreActionApi<State>,
    { defaultColor }: ContainerProps
  ) => {
    setState({
      color: value || defaultColor,
    });
  },
};

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

export const ThemeContainer = createContainer<State, Actions, ContainerProps>(
  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<State, Actions>(Store);

export const useTheme = createHook<State, Actions>(Store);
github atlassian / react-sweet-state / examples / performance-test / components / todos.js View on Github external
[todo.id]: { ...todo, isDone: !todo.isDone },
      },
    });
  },
};

const Store = createStore<State, Actions>({
  name: 'todos',
  initialState,
  actions,
});

/** Container */

type ContainerProps = {| n: number |};
export const TodosContainer = createContainer<State, Actions, ContainerProps>(
  Store,
  {
    onInit: () => ({ getState, dispatch }, { n }) => {
      if (getState().order.length) return;
      Array.from({ length: 10 * n }).map((__, i) => {
        const title = `Todo ${n}-${i + 1}`;
        dispatch(actions.add(title));
      });
    },
  }
);

/** Subscribers / Hooks */

const getAllTodosSelector = state => ({
  data: state.order.map(v => state.byId[v]),
github atlassian / react-sweet-state / examples / advanced-scoped-flow / components / form.js View on Github external
await new Promise(r => setTimeout(r, 1000));
    setState({
      isSending: false,
      message: '',
    });
    return message;
  },
};

const Store = createStore<State, Actions>({
  name: 'form',
  initialState,
  actions,
});

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

export const FormSubscriber = createSubscriber<State, Actions>(Store);

export const useForm = createHook<State, Actions>(Store);

export const FormActions = createSubscriber<State, Actions, void, void>(Store, {
  selector: null,
});
github atlassian / react-sweet-state / examples / advanced-flow / components / todo / index.js View on Github external
import * as actions from './actions';

type Actions = typeof actions;
type ContainerProps = {| selectedUser: string | null |};

const initialState: State = {
  data: null,
  loading: false,
};

const Store = createStore<State, Actions>({
  initialState,
  actions,
});

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

export const TodoSubscriber = createSubscriber<State, Actions>(Store);

export const useTodo = createHook<State, Actions>(Store);
github atlassian / react-sweet-state / examples / advanced-flow / components / user / index.js View on Github external
type Actions = typeof actions;
type ContainerProps = {||};
type UserSelectedState = $Call<typeof selectors.getSelected, State>;

const initialState: State = {
  selected: null,
  data: null,
  loading: false,
};

const Store = createStore<State, Actions>({
  initialState,
  actions,
});

export const UserContainer = createContainer<State, Actions, ContainerProps>(
  Store,
  {
    onInit: actions.load,
  }
);

export const UserSubscriber = createSubscriber<State, Actions>(Store);

export const UserSelectedSubscriber = createSubscriber<
  State,
  Actions,
  UserSelectedState,
  void
>(Store, {
  selector: selectors.getSelected,
});

react-sweet-state

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

MIT
Latest version published 10 days ago

Package Health Score

87 / 100
Full package analysis