Introduction to React & Redux

This section introduces React and Redux, the “functional UI” paradigm which works really well in combination with RxJS.



Bare-bones redux demo

This is a demo of a bare-bones React application following Redux principles and implemented solely with RxJS, that illustrates the underlying principles of action & store streams and reduxification of actions to produce transitions in the store:

// Type definition for redux actions
interface Action {
  type: string;
  payload: string;

// Type definition for application state
interface State {
  text: string;

// Create our stream: rx subjects allow for both pushing data into the stream and subscribing
const action$ = new Subject<Action>();

// Initial State
const initialState: State = { text: 'Rx' };

// Redux reducer
function reducer(prevState: State, action: Action): State {
  console.log(`reducing action ${action.type}`);
  switch (action.type) {
    case 'TEXT_CHANGED':
      return {
        text: action.payload
      return prevState;

// Reduxification
const store$ = Observable.concat(
  action$.scan(reducer, initialState));

// Higher order function to send actions to the stream
function dispatchAction(action: Action) {
  console.log(`dispatching action ${action.type}`);

// Example action function
function changeText(newText: string) {
    type: 'TEXT_CHANGED',
    payload: newText

// React App component 
function App(state: State): React.ReactElement<any> {
  return (  // JSX elements produce React "elements" - they are syntactic sugar for React.createElement()
      <button onClick={() => changeText('Rx')}>Rx</button>
      <button onClick={() => changeText('Rocks')}>Rocks</button>

// Subscribe and render the view
store$.subscribe((state: State) => {
  console.log(`rendering app`);
  ReactDOM.render(<App {...state} />, document.getElementById('app'));

you can see it live here

complete source is available here