Question

当我单击注销时，我想删除所有状态。所以我在做什么

const appReducer = combineReducers({
  LoginReducer,
  UserJobs,
  Technologies,
  QuizData,
  MediumQuizData,
  HighQuizData,
  FetchedQuestions,
  GetAnalitics
});

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_REQUEST) {
    state = undefined
  }
  return appReducer(state, action)
}

export default rootReducer

在我的商店中

export default function configureStore() {
    let store = createStore(appReducer, applyMiddleware(thunk))
    return store;
}

注销时单击

handleLogout = () => {
        this.props.logoutUser();
    }


export function logoutUser() {
    return {
        type: LOGOUT_REQUEST
    }
}

减速器-

const initialState = {
    Low: [
        {
            id: 'L0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'EASY'
        }
    ],
}
export default function QuizData(state = initialState, action) {
    switch (action.type) {
        case QUIZ_DATA:
            return {
                ...state,
                Low: action.data,
                error: false,
            }
        case ADD_NEW:
            return {
                ...state,
                Low: action.data,
                error: false,
            }
        case REMOVE_TECH:
            return {
                ...state,
                Low: action.data,
                error: false,
            }
        default:
            return state
    }
}

这个reducer有一些数据，当用户执行某项操作时会添加，例如我确实有三个select选项，当用户选择时，这将更新数组，这意味着数组将获取所有值。因此，当我注销时，该值在该状态下保持不变。

这里应该将所有化简器值设置为初始状态，但是当我单击注销按钮时，它首先设置为undefined，然后立即打印出另一个具有该状态的所有数据的状态。所以，我不明白为什么会这样。

Answer 1

我认为您必须返回state = undefined，

 if (action.type === LOGOUT_REQUEST) {
   return state = undefined
  }

否则，减速器将始终处于当前状态。当您返回未定义状态时，商店会将其设置为初始状态。

如果您想将某些项目保留在化简器中，而不想清除它们，例如，区域设置或访客和用户的一些通用模块，则可以执行以下操作：

const rootReducer = (state, action) => {
  if (action.type === 'LOG_OUT') {
    const localeReducer = state.localeReducer;
    return Object.assign({}, initialState, {
      localeReducer,
    });
  }

  return appReducer(state, action);
};

Answer 2

根据我的理解，状态在所有动作调度中都保持不变。当我说坚持的时候，这意味着我们根据尊重不变性的行动对象中传递的行动类型来替换当前状态特定的化简器对象。因此，app reducer是父reduce的其中之一，它是决定在何处更新状态的起点。因此，对于某些操作，您想清除存储中的所有状态并将其设置为initialstate。您需要发送黑色对象，而不是在当前状态下传递。

在此处执行注销操作，您可以执行以下操作：

const rootReducer = (state, action) => {
  let copyState = state
  if (action.type === LOGOUT_REQUEST) {
    copyState = {}
  }
  return appReducer(copyState, action)
}

任何建议都值得赞赏！

Answer 3

Redux doc关于combineReducers的状态：

请注意，每个这些化简器都在管理自己的全局状态部分。每个reducer的状态参数都不同，并且对应于它管理的状态部分。 It's not magic。

因此还原store the state internally (privately)和the only way to change data in store is - to dispatch an action。

我认为您不需要清除所有状态，因为正如您在评论中提到的那样-引发了所订阅的组件无法读取未定义的错误。您真正需要的-是将状态设置为初始值。

如果您希望它按照已经启动的方式进行操作，则可以导入每个化简器的initialState，并为LOGOUT_REQUEST返回带有初始树的对象：

import { initialState as LoginReducer } from './LoginReducer';
import { initialState as UserJobs } from './UserJobs';
...

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_REQUEST) {
    return {
      LoginReducer,
      UserJobs,
      ... // all other initial values should be here as well
    }
  }
  return appReducer(state, action)
}

第二种解决方法是在每个单个化简器中监听LOGOUT_REQUEST并返回initialState：

 const initialState = {
    Low: [
        ...
    ],
}
export default function QuizData(state = initialState, action) {
    switch (action.type) {
        case QUIZ_DATA:
            ...
        case 'LOGOUT_REQUEST':
            return initialState;
        default:
            return state
    }
}

希望有帮助。

设置为空后状态不会变空

3 个答案: