Redux 状态未初始化为初始状态

Question

我是react-redux 的新手。在这里，我有一个减速器，就像，

const initialState = {
    Low: [
        {
            id: 0,
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            allowded: 6,
            level: 'EASY'
        }
    ],
    Medium: [
        {
            id: 0,
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            allowded: 7,
            level: 'MEDIUM'
        }
    ],
    High: [
        {
            id: 0,
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            allowded: 7,
            level: 'TOUGH'
        }
    ]
}

export default function QuizData(state = initialState, action) { 
   switch (action.type) {
        case QUIZ_DATA:
        return {
            ...state,
            [action.data.type]: [...action.data.tobeData],
            error: false,
        }
    case ADD_NEW:
        return {
            ...state,
            [action.data.addtype]: action.data.addData,
            error: false,
        }
    case REMOVE_TECH:
        return {
            ...state,
            [action.data.removeType]: action.data.newArr,
            error: false,
        }
        case RESET_QUIZ:
            return {
                ...initialState,
                error: false,
            }

 }

现在，点击按钮，我正在调用一个将数据重置为初始状态的操作。

this.props.resetQuiz();

这是

export function resetQuiz() {
  return {
    type: RESET_QUIZ
  }
}

我在哪里使用它

让 newData = { ...this.props.data };同时在组件中使用它来做一些操作。

现在发生的情况是在执行一些操作后，初始状态数据会随着一些新值发生变化，..

但是，在单击按钮时，我想将其设置为 initialState。

所以，当我尝试那个时候，initialState 也得到了相同的值。所以，它没有重置。

我在组件中使用它，

data: state.QuizData // In statetoprops.

let criterias = [{
      type: 'Low',
      noc: 6,
      id: 1,
      data: this.props.data["Low"]
    }, {
      type: 'Medium',
      noc: 7,
      id: 2,
      data: this.props.data["Medium"]

    },
    {
      type: 'High',
      noc: 7,
      id: 3,
      data: this.props.data["High"]
    }]

在像这样的组件中使用动作时，

createQuestionBankQuiz = () => {
    this.props.resetQuiz();
    history.push({
      pathname: "/quiz-setup/" + `${this.props.jdId}`
    });
  };



export default connect(mapStateToProps, { fetchListOfQuiz, updateQuestionViewMode, enableJob, resetQuiz })(LandingScreen);

我更新的方式是

onChange(event, tobeupdated, id, type, noc, data) {
    let newData = { ...this.props.data };
    let errorState;
    let isDuplicate;
    let addedRow;
    if (newData) {
      let data = newData[type].map((object, index) => {
        if (object.id === id) {
          object[tobeupdated] = event.target.value;
          const tobeData = newData[type];
          this.props.updateLowLevel({ tobeData, type }).then(() => {
            let criteria_filled = this.disableAddbutton({ ...this.props.data }, type);
            addedRow = `new${type}RowAdded`;
            this.setState({
              [addedRow]: criteria_filled ? true : false
            })
            const tobechecked = newData[type].filter(item => item.id === id);
            isDuplicate = this.checkPreviousSelected(newData, type, tobechecked[0].technology, tobechecked[0].type);
            if (isDuplicate) {
              toastr.error("Duplicate criteria. Please change it.");
              object["technology"] = '';
              object["type"] = '';
              const tobeData = newData[type];
              this.props.updateLowLevel({ tobeData, type });
            }
          });
        }
      });
      errorState = `show${type}Error`;
      if (tobeupdated !== "count") {
        this.getSelectionQuestionsNumber(type, id, noc);
      }
      let validateData = this.validate(type, noc);
      this.setState({
        [errorState]: validateData
      })
    }
  }

我做错了什么？

Answer 1

我认为你的动作调度错了

export function resetQuiz() {
  return dispatch => {
    dispatch({
      type: RESET_QUIZ
    })
  }
}

我认为如果你在 reducer 中尝试这个会更好

export default function QuizData(state = initialState, action) {
  switch (action.type) {
    case RESET_QUIZ:
      return Object.assign({}, initialState, {error: false})

    default:
      return state;
  }
}

Answer 2

你只需要在reducer中返回初始值，例如：

export default function QuizData(state = initialState, action) {
  switch (action.type) {
    case RESET_QUIZ:
      return initialState

    default:
      return state;
  }
}

Answer 3

您忘记在减速器中返回 state 以执行 default 操作：

export default function QuizData(state = initialState, action) { 
   switch (action.type) {
        case QUIZ_DATA:
        return {
            ...state,
            [action.data.type]: [...action.data.tobeData],
            error: false,
        }
    case ADD_NEW:
        return {
            ...state,
            [action.data.addtype]: action.data.addData,
            error: false,
        }
    case REMOVE_TECH:
        return {
            ...state,
            [action.data.removeType]: action.data.newArr,
            error: false,
        }
        case RESET_QUIZ:
            return {
                ...initialState,
                error: false,
            }

   return state; // you forgot this
 }

redux 在 store 初始化时发出某种 init 操作，因此您需要在减速器中返回给定的 state 以用于其他操作而不是您自己定义的操作。

Answer 4

可能是您没有在其他操作中进行深度复制。

能否为其他动作添加reducer的代码？

编辑： 您的问题的快速解决方案是更改减速器，如下所示：

export default function QuizData(state = JSON.parse(JSON.stringify(initialState)), action) { 
  ....
 }

注意：JSON.parse(JSON.stringify(initialState)) 适用于您的情况，但不适用于所有情况，也不是一个好的解决方案。你必须为此编写深拷贝逻辑。

正确/正确的解决方案：

您必须修改您的组件逻辑以不直接修改存储数据并通过其他操作对其进行更新。