Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I thought I would share some styleguide ideas that are based on code we’ve been discussing before:

counter.ts: In the reducers there is a bug in TypeScript that does not check the object properties correctly when using the spread operator: . It will be fixed in TypeScript 2.4. After that the reducers will be type-safe.

import { Store, Reducer, Action } from "reactive-state";

export interface CounterState {
	value: number;
export const initialCounterState = {
	value: 0

export const increment = new Action<number>();
export const incrementReducer: Reducer<CounterState, number> = (state, payload = 1) => {
	return { ...state, value: state.value + payload };

export const decrement = new Action<number>();
export const decrementReducer: Reducer<CounterState, number> = (state, payload = 1) => {
	return { ...state, value: state.value - payload };

export const registerCounterReducers = (store: Store<CounterState>) => {
	store.addReducer(increment, incrementReducer);
	store.addReducer(decrement, decrementReducer);

        // This part I'm not super happy about, more about it later in this post.
	return {

export const registerCounterSelectors = (store: Store<CounterState>) => {
	return {
		getValue: => s.value)

store.ts: Function names could be thought about to not be too long, also they could maybe always start with the reducer name e.g. counterRegisterReducer and counterInitialState. This would make store.ts a bit cleaner and easier to read I guess.

import { Store, Reducer, Action } from 'reactive-state';
import { Observable } from 'rxjs/Observable';
import {
} from './reducers/counter';

export interface AppState {
	counter: CounterState;

const appInitialState = {
	counter: initialCounterState

export const rootState = Store.create(appInitialState);

const counterStore: Store<CounterState> = rootState.createSlice('counter');
export const counterActions = registerCounterReducers(counterStore);
export const counterSelectors = registerCounterSelectors(counterStore);

app.ts or anywhere you would like to use the store: Always import Actions and Selectors from the same place. One thing that could make it easier and cleaner would be to make addReducer return the action instead of the Subscription (maybe I use it wrong?).

import { AppState, counterActions, counterSelectors } from './store';
import { Observable } from 'rxjs/Observable';

class AppComponent {
	testObservable$: Observable<number>;

	constructor() {
		this.testObservable$ = counterSelectors.getValue;

	nextnumber() {;

Ideas and comments are more than welcome!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

Dynaloncommented, Dec 28, 2017

Well for real-life scenario I assume one would use React/Angular/Vue, and in this case the registering of the modules with custom reducers/actions are most likely triggered by the component lifecycle callbacks:

  • ngOnInit/ngOnDestroy hooks in a component in Angular
  • componentWillMount/componentWillUnmount in React
  • beforeCreated/destroyed hooks in Vue

In React/Angular you would have “dumb” container components for your modules, which would be the perfect place to put the reducer registration/deregistation logic. I don’t know about Vue.js. Those dumb components would be created possible on a route, but also might be created upon user interaction etc.

Dynaloncommented, Oct 20, 2017

FYI, in the meantime I have

  1. Created a react-redux like bridge that mimics the connect() function from react-redux, but is suited to reactive-state to connect a store to a component. Currently it lives in reactive-state/dist/react but will after some testing and feedback eventually moved to its own project (just like react-redux).
  2. Create a sample application with commented sourcecode as explanation how to use reactive-state as well as the react bridge described above. This could also serve as a starting point for a styleguide. The sample app uses react, react-router v4 and reactive-state.

Let me know what you think.

Read more comments on GitHub >

github_iconTop Results From Across the Web

21 Brand Style Guide Examples for Visual Inspiration
A brand style guide is essential to any organization seeking cohesive and recognizable marketing. Check out these examples to inspire your ...
Read more >
19 Brand Style Guide Examples to Spark Your Creativity
From your logo design ideas to your typography and icons, having this foundational guide will keep everyone on the same page in diverse ......
Read more >
19 Outstanding Brand Style Guide Examples - Elementor
19 Outstanding Brand Style Guide Examples · 1. Skyscanner · 2. Mozilla Firefox · 3. Fisher-Price · 4. Waze · 5. WeWork ·...
Read more >
50 of the best brand style guides to inspire you - Canva
In this article, we look at 50 inspiring style guides from companies around the world. Learn how to build your own style guide,...
Read more >
25 Amazing Style Guide Examples to Inspire Your Brand
The best brand style guide examples · 1. Instagram · 2. Netflix · 3. Ben & Jerry's · 4. NASA · 5. Spotify...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found