Commit a502b3a7 authored by Wietse Kuipers's avatar Wietse Kuipers

No more local state

parent d6beacd3
import * as types from './actionTypes'; import * as types from './actionTypes';
export function login(username, password) { export function enterUsername(username) {
return { return {
type: types.LOGIN, type: types.ENTER_USERNAME,
username, username,
};
}
export function enterPassword(password) {
return {
type: types.ENTER_PASSWORD,
password, password,
}; };
} }
export function login() {
return {
type: types.LOGIN,
};
}
export const LOGIN = 'LOGIN'; export const LOGIN = 'LOGIN';
export const ENTER_USERNAME = 'ENTER_USERNAME';
export const ENTER_PASSWORD = 'ENTER_PASSWORD';
import React, { Component } from 'react'; import React from 'react';
import { View, TextInput, Button, Text } from 'react-native'; import { View, TextInput, Button, Text } from 'react-native';
export default class Login extends Component { const Login = (props) => {
constructor(props) { const { enterPassword, loginError, login } = props;
super(props); return (
this.state = { <View>
username: '', <TextInput
password: '', placeholder="Username"
}; />
this.login = props.login; <TextInput
} placeholder="Password"
secureTextEntry
onPress() { onChangeText={enterPassword}
return this.login.bind(null, this.state.username, this.state.password); />
} <Button title="Log in" onPress={login} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
render() { </View>
const { loginError } = this.props; );
return ( };
<View>
<TextInput
placeholder="Username"
onChangeText={username => this.setState({ username })}
/>
<TextInput
placeholder="Password"
secureTextEntry
onChangeText={password => this.setState({ password })}
/>
<Button title="Log in" onPress={this.onPress()} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
</View>
);
}
}
Login.propTypes = { Login.propTypes = {
login: React.PropTypes.func.isRequired, login: React.PropTypes.func.isRequired,
enterPassword: React.PropTypes.func.isRequired,
loginError: React.PropTypes.bool.isRequired,
}; };
export default Login;
import React from 'react'; import React from 'react';
import { bindActionCreators } from 'redux'; // import { Navigator } from 'react-native';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Login from '../components/Login'; import Login from '../components/Login';
import * as ThaliAppActions from '../actions/ThaliAppActions'; import * as ThaliAppActions from '../actions/ThaliAppActions';
const ThaliApp = (props) => { const ThaliApp = props => (
const { state, actions } = props; <Login {...props} />
return (
<Login
loggedIn={state.loggedIn}
loginError={state.loginError}
{...actions}
/>
); );
};
ThaliApp.propTypes = { ThaliApp.propTypes = {
state: React.PropTypes.objectOf(React.PropTypes.oneOfType([ login: React.PropTypes.func.isRequired,
React.PropTypes.string, loggedIn: React.PropTypes.bool.isRequired,
React.PropTypes.bool, loginError: React.PropTypes.bool.isRequired,
React.PropTypes.number,
])).isRequired,
actions: React.PropTypes.objectOf(React.PropTypes.func).isRequired,
}; };
const mapStateToProps = state => ({
loggedIn: state.login.loggedIn,
loginError: state.login.loginError,
});
const mapDispatchToProps = dispatch => ({
login: () => dispatch(ThaliAppActions.login()),
enterPassword: password => dispatch(ThaliAppActions.enterPassword(password)),
});
export default connect( export default connect(
state => ( mapStateToProps,
{ state: state.login } mapDispatchToProps,
),
dispatch => (
{ actions: bindActionCreators(ThaliAppActions, dispatch) }
),
)(ThaliApp); )(ThaliApp);
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux'; import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import * as reducers from '../reducers'; import * as reducers from '../reducers';
import ThaliApp from './ThaliApp'; import ThaliApp from './ThaliApp';
...@@ -10,5 +9,4 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore); ...@@ -10,5 +9,4 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers); const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer); const store = createStoreWithMiddleware(reducer);
const Main = () => <Provider store={store}><ThaliApp /></Provider>; const Main = () => <Provider store={store}><ThaliApp /></Provider>;
export default Main; export default Main;
...@@ -3,16 +3,22 @@ import * as types from '../actions/actionTypes'; ...@@ -3,16 +3,22 @@ import * as types from '../actions/actionTypes';
const initialState = { const initialState = {
loggedIn: false, loggedIn: false,
loginError: false, loginError: false,
username: '',
password: '',
}; };
export default function login(state = initialState, action = {}) { export default function typing(state = initialState, action = {}) {
switch (action.type) { switch (action.type) {
case types.ENTER_USERNAME:
return { ...state, username: action.username };
case types.ENTER_PASSWORD:
return { ...state, password: action.password };
case types.LOGIN: case types.LOGIN:
if (action.password === '42') { if (state.password === '42') {
return { ...state, loginError: false, loggedIn: true }; return { ...state, loginError: false, loggedIn: true };
} }
return { ...state, loginError: true }; return { ...state, loginError: true };
default: default:
return { ...state }; return state;
} }
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment