No more local state

app/actions/ThaliAppActions.js

 import * as types from './actionTypes';
 
-export function login(username, password) {
+export function enterUsername(username) {
   return {
-    type: types.LOGIN,
+    type: types.ENTER_USERNAME,
     username,
+  };
+}
+
+export function enterPassword(password) {
+  return {
+    type: types.ENTER_PASSWORD,
     password,
   };
 }
+
+export function login() {
+  return {
+    type: types.LOGIN,
+  };
+}

app/actions/actionTypes.js

 export const LOGIN = 'LOGIN';
+export const ENTER_USERNAME = 'ENTER_USERNAME';
+export const ENTER_PASSWORD = 'ENTER_PASSWORD';

app/components/Login.js

-import React, { Component } from 'react';
+import React from 'react';
 import { View, TextInput, Button, Text } from 'react-native';
 
-export default class Login extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      username: '',
-      password: '',
-    };
-    this.login = props.login;
-  }
-
-  onPress() {
-    return this.login.bind(null, this.state.username, this.state.password);
-  }
-
-  render() {
-    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>
-    );
-  }
-}
+const Login = (props) => {
+  const { enterPassword, loginError, login } = props;
+  return (
+    <View>
+      <TextInput
+        placeholder="Username"
+      />
+      <TextInput
+        placeholder="Password"
+        secureTextEntry
+        onChangeText={enterPassword}
+      />
+      <Button title="Log in" onPress={login} />
+      <Text>{ loginError ? 'Login faal' : '' }</Text>
+    </View>
+  );
+};
 
 Login.propTypes = {
   login: React.PropTypes.func.isRequired,
+  enterPassword: React.PropTypes.func.isRequired,
+  loginError: React.PropTypes.bool.isRequired,
 };
+
+export default Login;

app/containers/ThaliApp.js

 import React from 'react';
-import { bindActionCreators } from 'redux';
+// import { Navigator } from 'react-native';
+// import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Login from '../components/Login';
 import * as ThaliAppActions from '../actions/ThaliAppActions';
 
-const ThaliApp = (props) => {
-  const { state, actions } = props;
-  return (
-    <Login
-      loggedIn={state.loggedIn}
-      loginError={state.loginError}
-      {...actions}
-    />
+const ThaliApp = props => (
+  <Login {...props} />
   );
-};
 
 ThaliApp.propTypes = {
-  state: React.PropTypes.objectOf(React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.bool,
-    React.PropTypes.number,
-  ])).isRequired,
-  actions: React.PropTypes.objectOf(React.PropTypes.func).isRequired,
+  login: React.PropTypes.func.isRequired,
+  loggedIn: React.PropTypes.bool.isRequired,
+  loginError: React.PropTypes.bool.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(
-  state => (
-    { state: state.login }
-  ),
-  dispatch => (
-    { actions: bindActionCreators(ThaliAppActions, dispatch) }
-  ),
+  mapStateToProps,
+  mapDispatchToProps,
 )(ThaliApp);

app/containers/app.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { createStore, applyMiddleware, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
-
 import * as reducers from '../reducers';
 import ThaliApp from './ThaliApp';
 
@@ -10,5 +9,4 @@ const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const reducer = combineReducers(reducers);
 const store = createStoreWithMiddleware(reducer);
 const Main = () => <Provider store={store}><ThaliApp /></Provider>;
-
 export default Main;

app/reducers/login.js

@@ -3,16 +3,22 @@ import * as types from '../actions/actionTypes';
 const initialState = {
   loggedIn: false,
   loginError: false,
+  username: '',
+  password: '',
 };
 
-export default function login(state = initialState, action = {}) {
+export default function typing(state = initialState, action = {}) {
   switch (action.type) {
+    case types.ENTER_USERNAME:
+      return { ...state, username: action.username };
+    case types.ENTER_PASSWORD:
+      return { ...state, password: action.password };
     case types.LOGIN:
-      if (action.password === '42') {
+      if (state.password === '42') {
         return { ...state, loginError: false, loggedIn: true };
       }
       return { ...state, loginError: true };
     default:
-      return { ...state };
+      return state;
   }
 }

[Thom Wiggers]

This breaks the build. Sad.