This section introduces React and Redux, the “functional UI” paradigm which works really well in combination with RxJS.
Slides
IntroductionToReactBare-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
};
default:
return prevState;
}
}
// Reduxification
const store$ = Observable.concat(
Observable.of(initialState),
action$.scan(reducer, initialState));
// Higher order function to send actions to the stream
function dispatchAction(action: Action) {
console.log(`dispatching action ${action.type}`);
action$.next(action);
}
// Example action function
function changeText(newText: string) {
dispatchAction({
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()
<div>
<h1>{state.text}</h1>
<button onClick={() => changeText('Rx')}>Rx</button>
<button onClick={() => changeText('Rocks')}>Rocks</button>
</div>
);
}
// Subscribe and render the view
store$.subscribe((state: State) => {
console.log(`rendering app`);
ReactDOM.render(<App {...state} />, document.getElementById('app'));
});