Reducer 更新它不应该访问的状态对象答案

【问题标题】：Reducer updates state object which it should not be able to accessReducer 更新它不应该访问的状态对象
【发布时间】：2019-02-08 18:13:24
【问题描述】：

问题是当我的reducer更新自己的状态时，它也会更新另一个reducer的状态。

//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 的初始状态，但是当使用 redux devtools 检查时，我可以看到作为 studentReducer 初始状态一部分的数组“studens”也被更新了。据我了解，这应该是不可能的。

用户登录后，students数组被填充：（来自redux devtools）

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

【问题讨论】：

请贴出studentReducer.js的完整代码，包括studentReducer函数
使用学生操作检查 POST_LOGIN_FULFILLED 的值。确保它们不相同。

标签： reactjs redux state redux-thunk

【解决方案1】：

通过阅读您的 cmets，看起来 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 ';

动作类型应该是唯一的，否则它可能会被其他动作触发

【讨论】：