Comprehensive Flow with React & Redux – Jiri Kolarik – Medium

Comprehensive Flow with React & Redux  #flow #flowtype #react #reactjs #redux #reactjs

  • This is bit boilerplate, you have to say what goes in and what action is returned including a type but in this case not only a string, but exactly the same constat.//@flowexport type AppLocaleChangeType = { type: ‘APP/LOCALE:CHANGE’, locale: string};export function appLocaleChange(locale: string): AppLocaleChangeType { return { type: APP.LOCALE.CHANGE, locale…
  • Now we see in our switch/case what action are we dealing with and what options do we have.//@flowimport type { ActionType } from ‘actions/index’;export type AppState = { +locale: string}const initState: AppState = { locale: ‘en’}export default function reducer(state: AppState = initialState, action: ActionType) { switch (action.type) { case APP.LOCALE.CHANGE:…
  • /app’;export type State = { +app: AppState}ComponentsRight now, we know how the state may look like and whatever actions we can use// @flowimport React from ‘react’;import { connect } from ‘react-redux’;import { appLocaleChange } from ‘actions/app’;import type { Dispatch } from ‘actions/index’;type Props = { dispatch: Dispatch}const Language = (props:…
  • // @flowimport React from ‘react’;import { connect } from ‘react-redux’;import { appLocaleChange } from ‘actions/app’;import type { State } from ‘store/types’;import type { Dispatch } from ‘actions/index’;import type { MapStateToProps } from ‘react-redux’;type OwnProps = { visible: boolean}type StateProps = { locale: string}type Props = { dispatch: Dispatch} OwnProps StatePropsconst…
  • props.visible) { return null; }const onChange = (event: SyntheticEventEventTarget) = { if (event.target instanceof HTMLInputElement) { } };return ( div className=”css-select” styleName=”select” select onChange={onChange} defaultValue={props.locale} option value=”EN”English/option option value=”CS”Czech/option /select /div );};const mapStateToProps: MapStateToPropsState, OwnProps, StateProps = (state) = ({ locale: state.app.locale});export default now you should have access to all…

Before I start, I’d like to say, that this is my very first article. I’m not good in writing or expressing my self in my native language and in English is even bit worse, but I haven’t found an…
Continue reading “Comprehensive Flow with React & Redux – Jiri Kolarik – Medium”