React Redux Indira Gutierrez May 26 2017 React

React + Redux Indira Gutierrez May 26, 2017

React Component import React, {Component} from 'react' class Test. Component extends Component { constructor(props) { super(props); this. state = {}; } render() { return ( <div> </div> ) } } export default Test. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Redux Container import {connect} from 'react-redux' import Test. Container. Component from '. . /components/Test. Container' import {} from '. . /actions' const map. State. To. Props = (state, own. Props) => { return { x = state. x, } }; const map. Dispatch. To. Props = (dispatch, own. Props) => { return { on. Changex: (event, valy) => { dispatch(action. Name(valy)); }, } }; const Test. Container = connect(map. State. To. Props, map. Dispatch. To. Props)(Test. Container. Component); export default Test. Container; Redux emits state updates in response to actions. Containers are the way to connect the independent components to the global store Variables here accesed in the container under this. props

Actions In actions/index. js export const SWITCH_BACKEND = 'SWITCH_BACKEND' export const switch. Backend = (selected: string) => { return { type: SWITCH_BACKEND, selected } } Actions are triggered from a React Container through a ‘dispatch’ action linked through the map. Dispatch. To. Props.

Reducers const backends = (state: backends. State = default. State, action: Backend. Action) => { switch(action. type) { case 'SWITCH_BACKEND': return Object. assign({}, state, {selected: action. selected}); default: return state } }; Reducers listen to an action change and update the store

Actions Component/Switch. API. jsx import React, { Component } from 'react' styles from '. . /styles/main. css' Select. Field from 'material-ui/Select. Field'; Menu. Item from 'material-ui/Menu. Item'; class Switch. API extends Component { handle. Change = (e, index, value) => { } this. props. on. Backend. Change(value); render() { return ( <div class. Name={styles. contentcenter}> <h 4>Pick an instance</h 4> <Select. Field value={this. props. selected} Containers/Switch. API. jsx import const map. State. To. Props = (state) => { return { selected: state. backends. selected, endpoints: state. backends. endpoints } }; const map. Dispatch. To. Props = (dispatch: Dispatch) => { return { on. Backend. Change: (selected: string) => { dispatch(switch. Backend(selected)); on. Change={this. handle. Change}> {this. props. endpoints. map( (b, index) => <Menu. Item value={b. url} key={index} primary. Text={b. label} /> )} </Select. Field> </div> ) } } export default Switch. API { connect } from 'react-redux' { switch. Backend, fetch. Sensors } from '. . /actions' Switch. APIComponent from '. . /components/Switch. API' type { Dispatch } from '. . /utils/flowtype' }; } } dispatch(fetch. Sensors(selected)) const Switch. API = connect(map. State. To. Props, map. Dispatch. To. Props)(Switch. APIComponent); export default Switch. API

Actions Component/Switch. API. jsx import React, { Component } from 'react' styles from '. . /styles/main. css' Select. Field from 'material-ui/Select. Field'; Menu. Item from 'material-ui/Menu. Item'; class Switch. API extends Component { handle. Change = (e, index, value) => { this. props. on. Backend. Change(value); } render() { return ( <div class. Name={styles. contentcenter}> <h 4>Pick an instance</h 4> <Select. Field value={this. props. selected} on. Change={this. handle. Change}> {this. props. endpoints. map( (b, index) => <Menu. Item value={b. url} key={index} primary. Text={b. label} /> )} </Select. Field> </div> ) } } export default Switch. API Containers/Switch. API. jsx import { connect } from 'react-redux' { switch. Backend, fetch. Sensors } from '. . /actions' Switch. APIComponent from '. . /components/Switch. API' type { Dispatch } from '. . /utils/flowtype' const map. State. To. Props = (state) => { return { selected: state. backends. selected, }; } endpoints: state. backends. endpoints const map. Dispatch. To. Props = (dispatch: Dispatch) => { return { on. Backend. Change: (selected: string) => { dispatch(switch. Backend(selected)); dispatch(fetch. Sensors(selected)) } } }; const Switch. API = connect(map. State. To. Props, map. Dispatch. To. Props)(Switch. APIComponent); export default Switch. API

State Flow case 'SWITCH_BACKEND': return Object. assign({}, state, {selected: action. selected}); map. State. To. Props Selected: state. backends. selected <Select. Field value={this. props. selected} on. Change={this. handle. Change}> export const switch. Backend = function(type=SWITCH_BACKEND) handle. Change = (e, index, value) => { this. props. on. Backend. Change(value); } map. Dispatch. To. Props on. Backend. Change (dispatch(switch. Backend(selected)); ) Component Container Actions Reducer Color of the line indicates color of the variable being shared in that direction