Question

问题在于，当我的reducer的on更新其自己的状态时，它还会更新另一个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
}

Answer 1

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

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

Reducer更新其不应访问的状态对象

1 个答案: