Состояние 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
  }
}

где я его использую

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

Вы забыли вернуть 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 в ваших редукторах для действий, отличных от тех, которые вы определили сами.

Answer 2

Может быть, вы не выполняете глубокое копирование в других действиях.

Можете ли вы добавить код редуктора для других действий?

Редактировать: Быстрое решение ваших проблем - заменить редукторкак показано ниже:

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

Примечание: JSON.parse (JSON.stringify (initialState)) работает для вашего случая, но не для всех случаев, и не является хорошим решением.Для этого вы должны написать логику глубокого копирования.

Правильное / правильное решение :

Вы должны изменить логику компонента, чтобы не изменять данные хранилища напрямую, и обновлять их черездругие действия.

Answer 3

вам просто нужно вернуть начальное значение в редукторе, например, вот так:

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

    default:
      return state;
  }
}

Answer 4

Я думаю, что вы не правы с диспетчеризацией действий

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

Я думаю, лучше, если вы попробуете это с редуктором

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

    default:
      return state;
  }
}