Состояние Redux не обновляется с сообщением о действии

Question

Я прошел через каждую часть документации и пример проекта, который я могу найти для создания реактивного приложения с помощью редукса и реагирующего маршрутизатора, но я просто не могу понять, как чтобы мое состояние редукции обновлялось при отправке действий. Как вы можете видеть на этом снимке экрана, действия отправляются правильно, но мой store/nextState не обновляется.

ДЕЙСТВИЯ:

export function updateUsername(username) { 
    return { type: types.UPDATE_USERNAME, username }; 
} 

РЕДУКТОР (EDIT: Я пробовал оба этих вариаций):

/* first variation */ 
    const username = (
     state = '', 
     action, 
    ) => { 
     switch (action.type) { 
     case types.UPDATE_USERNAME: 
      return Object.assign({}, state, { 
      username: action.username, 
      }); 
     default: 
      return state; 
     } 
    }; 

    /* second variation */ 
    const username = (
    state = '', 
    action, 
) => { 
    switch (action.type) { 
     case types.UPDATE_USERNAME: 
     return action.username; 
     default: 
     return state; 
    } 
    }; 

REDUCER КОМБИНАЦИЯ:

const user = combineReducers({ 
    isAuthenticated, 
    token, 
    password, 
    username, 
}); 

export default user; 

РЕДУКТОРЫ/index.js:

const rootReducer = combineReducers({ 
    isFetching, 
    open, 
    search, 
    user, 
    routing: routerReducer, 
}); 

export default rootReducer; 

хранения конфигурации:

import React from 'react'; 
import { createStore, compose, applyMiddleware } from 'redux'; 
import createLogger from 'redux-logger'; 
import thunkMiddleware from 'redux-thunk'; 
import { routerMiddleware } from 'react-router-redux'; 
import rootReducer from '../reducers'; 
import * as actions from '../actions'; 

function configureStore(history, initialState) { 
    const loggerMiddleware = createLogger(); 

    const enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__(); 

    const store = createStore(
    rootReducer, 
    initialState, 
    compose(
     applyMiddleware(
     thunkMiddleware, 
     loggerMiddleware, 
     routerMiddleware(history), 
    ), 
     enhancer, 
    ), 
); 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextReducer = rootReducer; 
     store.replaceReducer(nextReducer); 
    }); 
    } 

    return store; 
} 

export default configureStore; 

МАГАЗИНА СОЗДАНИЯ:

const initialState = {}; 

const store = configureStore(browserHistory, initialState); 
const history = syncHistoryWithStore(browserHistory, store); 
const routes = createRoutes(store); 


render(
    <Provider store={store}> 
     <Router history={history} routes={routes} /> 
    </Provider>, 
    document.getElementById('root'), 
); 

И, наконец, КОМПОНЕНТ:

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import TextField from 'material-ui/TextField'; 
import validator from 'validator'; 
import className from 'classnames'; 
import { Link } from 'react-router'; 
import * as AuthActions from '../../actions/AuthActions'; 

class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    this.handleUsernameChange = this.handleUsernameChange.bind(this); 
    this.handlePasswordChange = this.handlePasswordChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleUsernameChange(e) { 
    this.props.actions.updateUsername(validator.escape(e.target.value.trim())); 
    } 

    handlePasswordChange(e) { 
    this.props.actions.updatePassword(validator.escape(e.target.value.trim())); 
    } 

    handleSubmit(e, getState) { 
    e.prevent.default(); 
    const user = { username: this.props.user.username, password: this.props.user.password }; 
    console.log(user); 
    this.props.actions.loginUser(user); 
    } 

    render() { 
    return (
      <form autoComplete="off" onSubmit={this.handleSubmit} className='login-form'> 
      <TextField 
       type="username" 
       autoFocus="true" 
       floatingLabelText="Username" 
       floatingLabelFixed={true} 
       autoComplete="off" 
       onChange={this.handleUsernameChange} 
       /> 
      <br/> 
      <TextField 
       type="password" 
       autoFocus="true" 
       floatingLabelText="Password" 
       floatingLabelFixed={true} 
       autoComplete="off" 
       onChange={this.handlePasswordChange} 
       /> 
      </form> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    user: state.user, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(AuthActions, dispatch), 
    }; 
} 


export default connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(LoginForm); 

Я застрял на этом в течение недели теперь, так что любая помощь вы можете предложить БОЛЬШ была бы оценена! Благодаря!

Answer 1

Я не запустил ваш код, поэтому не могу сказать, если это исправить, но ваш редуктор имени пользователя возвращает объект с свойством username, когда он должен возвращать строку action.username.

const username = (state = '', action) => { 
    switch (action.type) { 
    case types.UPDATE_USERNAME: 
     return action.username 
    default: 
     return state; 
    } 
}; 

Кроме того, у вас проверить, что вы не опечатка в вашем types декларации? Я вижу, что в вашем редукторе вы ссылаетесь на types.UPDATE_USERNAME, но в своем создателе действия вы устанавливаете тип, используя строку UPDATE_USERNAME.