Редуктор обновляет объект состояния, к которому он не должен иметь доступ - PullRequest
Новая
       16

Редуктор обновляет объект состояния, к которому он не должен иметь доступ

0 голосов
/ 07 февраля 2019

Проблема в том, что когда мой редуктор обновляет свое собственное состояние, он также обновляет состояние другого редуктора.

// authActions.js 

export const authActions = {
    login: (props) => dispatch => {
        // This will make sure the loading spinner will appear.
        dispatch({
            type: POST_LOGIN_PENDING,
            payload: null
        })
        // make request to login user      
        axios.post(LOGIN_ENDPOINT, {
            email: props.email, 
            password: props.password
        }).then(res => dispatch({
            type: POST_LOGIN_FULFILLED,
            payload: res.data
        })
        ).catch( () => dispatch({
            type: POST_LOGIN_REJECTED,
            payload: null
        }))
    },
    logout: () => dispatch => {
        dispatch({
            type: LOGOUT,
            payload: null
        })
    },

// authReducer.js 

export const initialState = {
    token: "",
    userRole: "",
    isLoading: false,
    loginFailed: false,
    isAuthenticated: false,
}

export function authReducer(state = initialState, action) {
    switch (action.type) {
        case POST_LOGIN_PENDING:
            return {
                ...state,
                isLoading: true,
            }
        case POST_LOGIN_FULFILLED:
        return {
            ...state,
            token: action.payload.token,
            userRole: action.payload.userRole,
            loginFailed: false,
            isAuthenticated: true,
            isLoading: false,
        }
        case POST_LOGIN_REJECTED:
            return {
                ...state,
                loginFailed: true,
                isLoading: false,
            }

// studentActions.js 

export const studentActions = {
    getAllStudents: props => dispatch => {
        dispatch({
            type: GET_ALL_STUDENTS_PENDING,
            payload: null,
        })
        axios.get(STUDENTS_ENDPOINT, {
            headers: {
                'Authorization': `Bearer ${props.token}`
            }   
        })
        .then(res => 
            dispatch({
            type: GET_ALL_STUDENTS_FULFILLED,
            payload: res.data
        }))
        .catch(err => dispatch({
            type: GET_ALL_STUDENTS_FULFILLED,
            payload: err
        }))
    },

//studentReducer.js 

export const initialState = {
    students: [],
    err: "",
    isLoading: false,
}

export function studentReducer(state = initialState, action) {
    switch (action.type) {
        case GET_ALL_STUDENTS_PENDING:
            return {
                ...state,
                isLoading: true,
        }

        case GET_ALL_STUDENTS_FULFILLED:
            return {
                ...state,
                students: action.payload,
                isLoading: false,
        }

        case GET_ALL_STUDENTS_REJECTED:
            return {
                ...state,
                err: action.payload,
                isLoading: false,
        }
        case DELETE_STUDENT_BY_ID_FULFILLED:
            return state
        default:
            return state
    }
}

Когда пользователь входит в систему и применяется POST_LOGIN_FULFILLED.Я ожидал бы, что будет обновлено только начальное состояние authReducer, но когда я проверяю его с помощью devx, мы увидим, что массив «studens», который является частью начального состояния studentReducer, также обновляется.Из того, что я понимаю, это не должно быть возможным.

После того, как пользователь вошел в систему, список студентов заполнен: (Из избыточного devtools) 

student: {
   students: [] => {....some stuff}
   isLoading: true => false
}

1 Ответ

0 голосов
/ 07 февраля 2019

При чтении ваших комментариев это выглядит так: GET_ALL_STUDENTS_FULFILLED относится к POST_LOGIN_FULFILLED .Это должно быть причиной того, что ваш массив студентов обновляется.Измените 

 export const   GET_ALL_STUDENTS_PENDING = 'POST_LOGIN_PENDING';
 export const GET_ALL_STUDENTS_REJECTED = 'POST_LOGIN_REJECTED';
 export const GET_ALL_STUDENTS_FULFILLED = 'POST_LOGIN_FULFILLED';

на 

 export const GET_ALL_STUDENTS_PENDING = 'GET_ALL_STUDENTS_PENDING ';
 export const GET_ALL_STUDENTS_REJECTED = 'GET_ALL_STUDENTS_REJECTED ';
 export const GET_ALL_STUDENTS_FULFILLED = 'GET_ALL_STUDENTS_FULFILLED ';

Типы действий должны быть уникальными, иначе это может быть вызвано каким-либо другим действием

...