Компонент React не может повторно рендериться после обновления из Redux Store

Может ли кто-нибудь помочь мне понять, почему мой компонент не обновляется после отправки?

function mapStateToProps(state) {
     const { isAuthenticated } = state
     return { isAuthenticated }
}

class LoginForm extends Component {

 handleSubmit(event) { 
        event.preventDefault();
        const { dispatch } = this.props
        const credentials = this.state
        dispatch(attemptLogIn(credentials)); 
}


//    Dispatch works properly when API validates Login:
//               Redux Log:  
//                nextState:{ authReducer: {isAuthenticated: true}}

render() {
    const { isAuthenticated } = this.props;
        return (
  <div>
    { isAuthenticated && <div> Authenticated: True </div> } 
                         // Does not render even after dispatch

      <form onSubmit={this.handleSubmit}>
     {... Form Stuff ...}
      </form>
    </div>
  )
}

export default withRouter(connect(mapStateToProps)(LoginForm))

Простой условный рендеринг из магазина Redux, я ожидаю, что появится дополнительный div, чтобы сообщить пользователю, что он прошел аутентификацию, но он не отображается.

Этот тип примера условного рендеринга использовался в примере AsyncApp во время учебника по Redux Async, поэтому я не уверен, почему он не работает. Мои действия отправляются, и редукторы успешно обновляют состояние, передавая его подключенному компоненту. Вот мои редукторы:

const initialState = { isAuthenticated: false}

const authReducer = (state = initialState, action) => {
    switch(action.type){
    case ('USER_AUTHENTICATED'): { 
        return Object.assign({}, state, {
            isAuthenticated: true,
            userPermissions: action.userInfo.userPermissions,
            instanceType: action.userInfo.instanceType
            }
        )
    }
    case ('INVALID_CREDENTIALS'): { 
        return Object.assign({}, state, {
            isAuthenticated:false
            }
        ) 
    }

    case ('LOG_OUT'): { 
        return initialState 
    }
    default:
            return state
    }
}

const rootReducer = combineReducers({
    authReducer,
    routerReducer
})

export default rootReducer

Кто-нибудь знает, почему мой компонент не перерисовывается?


person Mikhail    schedule 05.01.2018    source источник
comment
Напишите форму функции mapStateToProps вне вашего компонента класса LoginForm.   -  person Kuldeep Saxena    schedule 05.01.2018
comment
@KuldeepSaxena Это была ошибка из-за публикации кода здесь - я отредактирую заново, мой mapStateToProps на самом деле находится вне компонента - я просто неправильно вставил сюда свой пример: \   -  person Mikhail    schedule 05.01.2018
comment
скрипка, пожалуйста   -  person Josh Lin    schedule 05.01.2018
comment
Работая над этим, потребуется некоторое время, чтобы загрузить все зависимости   -  person Mikhail    schedule 05.01.2018
comment
Редуктор, который вы разместили, ваш единственный/корневой редуктор? Или вы больше комбинируете?   -  person Balázs Édes    schedule 05.01.2018
comment
@BalázsÉdes Я обновил свой пример. Итак, я думаю, я должен дополнительно указать оператор деконструкции функции состояния, спасибо Кулдипу   -  person Mikhail    schedule 05.01.2018


Ответы (1)


Измените свою функцию mapStateToProps на это.

function mapStateToProps(state) {
 const { isAuthenticated } = state.authReducer;
 return { isAuthenticated };
}
person Kuldeep Saxena    schedule 05.01.2018
comment
Итак, я всегда должен указывать, из какого редюсера собирать состояние, если редьюсеров несколько? - person Mikhail; 05.01.2018
comment
Да, определите только те пропсы, для которых вы действительно хотите перерендерить свой компонент. Для лучшей производительности всегда указывайте свой реквизит. Например. Если у вас есть пользовательский объект, и вы используете только определенное его свойство в своей функции рендеринга, определите его следующим образом: username: state.user.name вместо username: state.user - person Kuldeep Saxena; 05.01.2018