Permalink
Browse files

Redux Connect integriert,

läuft noch nicht
  • Loading branch information...
ronnyhartenstein committed Sep 22, 2016
1 parent 6882130 commit 5df681546114082e170d5ef575763d5afc886f30
@@ -26,4 +26,4 @@ export function deleteItem(nr) {
type: actions.DELETE,
nr
};
}
}
@@ -5,6 +5,10 @@ import { SearchBar } from 'react-native-elements'
// SearchBar: https://github.com/react-native-community/react-native-elements#search-bar
// erweitert TextInput: https://facebook.github.io/react-native/docs/textinput.html
class Kopfzeile extends Component {
propTypes = {
doSearch: PropTypes.func.isRequired,
activeSearch: PropTypes.string.isRequired
}
constructor(props) {
super(props);
}
View
@@ -5,24 +5,33 @@ import { List, ListItem } from 'react-native-elements'
// https://github.com/react-native-community/React-Native-Elements#lists
class Liste extends Component {
propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
nr: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
lat: PropTypes.string.isRequired
}).isRequired).isRequired,
onItemClick: PropTypes.func.isRequired
}
constructor(props) {
super(props);
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
})
};
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
if (this.props.items) {
this.state.dataSource = this.state.dataSource.cloneWithRows(
this.state.dataSource = this.state.dataSource.cloneWithRows({
dataSource: ds.cloneWithRows(this.props.items)
);
};
})
}
}
renderRow (rowData, sectionID) {
return (
<ListItem
onClick={this.props.onItemClick}
key={sectionID}
title={rowData.name != "" ? rowData.name : "?"}
subtitle={rowData.lat != "" ? rowData.lat : "?"}
@@ -0,0 +1,25 @@
import React, { Component } from 'react'
import { doSearch } from '../actions/searchActions';
import Kopfzeile from './Kopfzeile'
import { connect } from 'react-redux'
const mapStateToProps = (state) => {
return {
activeSearch: state.search
}
}
const mapDispatchToProps = (dispatch) => {
return {
doSearch: (term) => {
dispatch(doSearch(term))
}
}
}
const ReduxKopfzeile = connect(
mapStateToProps,
mapDispatchToProps
)(Kopfzeile)
export default ReduxKopfzeile
@@ -0,0 +1,45 @@
import React, { Component } from 'react'
import { loadItem } from '../actions/itemActions';
import Liste from './Liste'
import { connect } from 'react-redux'
// import FuzzySearch from 'fuzzy-search'
import _ from 'lodash'
// beim Laden befüllen..
import daten from '../../daten/pilze.json'
_.each(daten, item => {
store.dispatch(loadItem(item))
});
const mapStateToProps = (state) => {
// https://www.npmjs.com/package/fuzzy-search
// Error "couldn't find preset "es2015" relative to directory.."
// const searchengine = () => ( new FuzzySearch(_.cloneDeep(state.items), ['name','lat']) );
const searchengine = () => {
return {
search: (term) => {
const r = new RegExp(term, 'i')
return _.filter(state.items, (itm) => ( r.test(itm.name) || r.test(itm.lat) ))
}
}
}
return {
items: _.isEmpty(state.search) ? state.items : searchengine().search(state.search)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onItemClick: (nr) => {
console.log("TODO zeige Details-Szene")
//dispatch(showDetails(nr))
}
}
}
const ReduxListe = connect(
mapStateToProps,
mapDispatchToProps
)(Liste);
export default ReduxListe
View
@@ -1,42 +1,20 @@
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import * as searchActions from '../actions/searchActions';
import * as itemActions from '../actions/itemActions';
import Fusszeile from '../components/Fusszeile'
import Kopfzeile from '../components/Kopfzeile'
import Liste from '../components/Liste'
import FuzzySearch from 'fuzzy-search'
import ReduxKopfzeile from '../components/ReduxKopfzeile'
import ReduxListe from '../components/ReduxListe'
// beim Laden befüllen..
import daten from '../daten/pilze.json'
daten.each(item => { store.dispatch(itemActions.loadItem(item)); });
// Mapping von Redux State auf Props
@connect(state => {
// https://www.npmjs.com/package/fuzzy-search
const searchengine = () => ( new FuzzySearch(_.cloneDeep(state.items), ['name','lat']) );
return {
items: _.isEmpty(state.search) ? state.items : searchengine().search(state.search)
search: state.search
};
});
export default class Pilzliste extends Component {
constructor(props) {
super(props);
}
render() {
const {items, search} = this.props;
return (
<View style={styles.container}>
<Kopfzeile
activeSearch={search}
{...bindActionCreators(searchActions, dispatch)}/>
<Liste
activeSearch={search}
items={items}
{...bindActionCreators(itemActions, dispatch)}/>
<ReduxKopfzeile />
<ReduxListe />
<Fusszeile />
</View>
)
View
@@ -3,9 +3,19 @@ import createLogger from 'redux-logger';
// import reducers from './reducers';
import searchReducer from './reducers/search';
import itemsReducer from './reducers/items';
import _ from 'lodash'
import { loadItem } from './actions/itemActions';
import daten from '../daten/pilze.json'
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
const reducers = combineReducers([ searchReducer, itemsReducer ]);
const store = createStoreWithMiddleware(reducers);
// beim Laden befüllen..
_.each(daten, item => {
store.dispatch(loadItem(item))
});
export default store;

0 comments on commit 5df6815

Please sign in to comment.