Объект класса не работает должным образом в редукторе

Question

У меня есть пользовательская модель (класс es6), и я создаю объект с помощью новой клавиатуры и передаю его в initialState в мою функцию userReducer.Как я могу обновить модель на основе действия.

Например, если я пытаюсь отправить действие, чтобы изменить isLogging в userModel, то prevState и nextState одинаковы в регистраторе.

https://i.ibb.co/0CBSZ5v/Screenshot-from-2019-04-19-19-07-44.png

User Reducer

import { USER } from '../constants'
import type { IUserInitialState, IUserAction } from '../types'
import { UserModel } from '../models'

const initialState: IUserInitialState = new UserModel()

export const userReducer = (state: IUserInitialState = initialState, action: IUserAction): Object => {
    console.log(state)
    switch (action.type) {
        case USER.LOGIN_REQUEST:
            console.log(state)
            initialState.userIsLogging = action.payload
            return initialState
        default:
            return state
    }
}

------------------------------
User Action

export const loginRequest = (type: boolean): Object => {
    return {
        type: USER.LOGIN_REQUEST,
        payload: type
    }
}

---

Модель пользователя

класс экспорта UserModel {

user: IUserModel = {
    username: '',
    password: '',
    isLogging: false
}

set userModel(userObject: IUserModel) {
    this.user = userObject
}

set userIsLogging(logging: boolean) {
    this.user.isLogging  = logging
}

get userIsLogging() {
    return this.user.isLogging
}

}

  [1]: https://i.ibb.co/0CBSZ5v/Screenshot-from-2019-04-19-19-07-44.png

Answer 1

Вы неправильно используете редуктор.

1- Когда вы создаете состояние, убедитесь, что это просто примитивный тип без каких-либо методов.

2- Редуктор отвечает за создание нового состояния для любого действия. Но вы только возвращаете исходное состояние. Вы должны иметь что-то вроде

case USER.LOGIN_REQUEST:
        console.log(state)
        initialState.userIsLogging = action.payload
        return {
           ...state,
           userIsLogging: action.payload,
        }

3- Возможно, вы захотите проверить саги. Вам не нужно обрабатывать всю эту асинхронную логику самостоятельно

Answer 2

Редуктор должен быть чистой функцией.Он должен возвращать новое состояние на основе предыдущего состояния и действия.

Пожалуйста, не изменяйте предыдущее состояние.Вместо этого создайте новый экземпляр, внесите необходимые изменения и, наконец, верните этот новый экземпляр.

Я настоятельно рекомендую вам посмотреть видео со страницы redux github .Нет лучшего объяснения, чем тот, от автора редукса.