Stencil Redux

A simple redux connector for Stencil-built web components inspired by react-redux.

Usage

Stencil Redux uses the official redux library underneath, so much of the creation and configuration of the store, along with specifying reducers and middleware, is identical.

Configure store

// src/store/index.ts
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // Add-on you might want
import logger from 'redux-logger'; // Add-on you might want
import rootReducer from '../reducers/index';

const configureStore = (preloadedState: any) =>
  createStore(rootReducer, preloadedState, applyMiddleware(thunk, logger));

export { configureStore };

Configure reducers

// src/reducers/index.ts
import myReducer from './myReducer';

import { combineReducers } from 'redux';

const rootReducer = (combineReducers as any)({
  myReducer
});
  
export default rootReducer;

Configure Store in Root Component

import { Store } from '@stencil/redux';
import { configureStore } from '../../store/index'; // index required due to bug

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.scss'
})
export class MyApp {
  @Prop({ context: 'store' }) store: Store;

  componentWillLoad() {
    this.store.setStore(configureStore({}));
  }
}

Map state and dispatch to props

import { Store, Action } from '@stencil/redux';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss'
})
export class MyComponent {
  @Prop({ context: 'store' }) store: Store;
 
  @State() name: string;
 
  changeName: Action;

  private unsubscribe: () => void;
   
  componentWillLoad() {
    this.unsubscribe = this.store.mapStateToProps(this, (state) => {
      const {
        myReducer: { name }
      } = state;
      return {
        name
      }
    });
   
    this.store.mapDispatchToProps(this, {
      changeName
    });
  }
 
  doNameChange(newName: string) {
    this.changeName(newName);
  }

  componentDidUnload() {
    this.unsubscribe();
  }
}