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
  }
}

我在哪里使用

let 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 = JSON.parse(JSON.stringify(initialState)), action) { 
  ....
 }

注意：JSON.parse（JSON.stringify（initialState））适用于您的情况，但不适用于所有情况，不是一个好的解决方案。您必须为此编写深度复制逻辑。

正确/正确的解决方案：

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

Answer 3

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

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

    default:
      return state;
  }
}

Answer 4

您忘记为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在初始化存储时发出某种init动作，因此您需要在化简器中返回给定的state来进行其他动作，而不是您自己定义的动作。< / p>

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

4 个答案: