Состояние Redux не инициализируется в исходное состояние

Question

Состояние Redux не инициализируется в исходное состояние

1

Я новичок в 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
      })
    }
  }

Что я делаю не так?

ganesh kaspate 17 дек. 2018, в 10:17

Источник

0

Почему вы не можете просто return initialState если хотите сбросить до этого? Т.е. case RESET_QUIZ: return initialState;
nbokmans 17 дек. 2018, в 09:11
0

Я тоже это попробовал.
ganesh kaspate 17 дек. 2018, в 09:13
0

Очевидно, вы устанавливаете свои данные викторины где-то еще. Нет никакого способа, которым ваше состояние не будет сброшено в initialState если вы initialState в вашем редукторе. Как вы распределяете действие?
nbokmans 17 дек. 2018, в 09:14
0

Ваш код возвращает новое состояние вместо сброса initialState Попробуйте код, например, Object.assign(initialState,{a:somevalue}) .
lx1412 17 дек. 2018, в 09:16
0

@ lx1412 Это идет вразрез с принципом реакт react-redux .
nbokmans 17 дек. 2018, в 09:19
0

@ nbokmans, Yes.reducer всегда должен быть чистой функцией.
lx1412 17 дек. 2018, в 09:21
0

Это не то, что я получал. initialState , как следует из названия, является начальным состоянием редуктора. Это не должно манипулировать.
nbokmans 17 дек. 2018, в 09:22
0

@ganeshkaspate Я думаю, проблема с отправкой вашего действия отсутствует. пожалуйста, проверьте мой ответ.
Tung Duong 17 дек. 2018, в 09:23

Показать ещё 6 комментариев

Теги:

javascript

reactjs

react-redux

redux

4 ответа

Ещё вопросы

Почему вы не можете просто return initialState если хотите сбросить до этого? Т.е. case RESET_QUIZ: return initialState;
Очевидно, вы устанавливаете свои данные викторины где-то еще. Нет никакого способа, которым ваше состояние не будет сброшено в initialState если вы initialState в вашем редукторе. Как вы распределяете действие?
Ваш код возвращает новое состояние вместо сброса initialState Попробуйте код, например, Object.assign(initialState,{a:somevalue}) .
@ lx1412 Это идет вразрез с принципом реакт react-redux .
@ nbokmans, Yes.reducer всегда должен быть чистой функцией.
Это не то, что я получал. initialState , как следует из названия, является начальным состоянием редуктора. Это не должно манипулировать.
@ganeshkaspate Я думаю, проблема с отправкой вашего действия отсутствует. пожалуйста, проверьте мой ответ.

Niels Dominguez · Answer 1 · 2018-12-17T07-50-00.000Z

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

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

    default:
      return state;
  }
}

Tung Duong · Answer 2 · 2018-12-17T07-20-00.000Z

0

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

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

Tung Duong 17 дек. 2018, в 07:20

0

Я только что попробовал, но это также дает мне те же ценности.
ganesh kaspate 17 дек. 2018, в 09:08
0

@ganeshkaspate, пожалуйста, попробуйте еще раз с return Object.assign({}, initialState, {error: false}) я редактировал.
Tung Duong 17 дек. 2018, в 09:09
0

Я только что обновил способ использования других корпусов в том же редукторе,
ganesh kaspate 17 дек. 2018, в 09:10
0

@ganeshkaspate Я думаю, что вы не правы в действиях отправки. пожалуйста, попробуйте с действием, которое я отредактировал.
Tung Duong 17 дек. 2018, в 09:13
0

Скорее всего проблема в том, как действительно отправляется действие, хороший улов
nbokmans 17 дек. 2018, в 09:18
0

прохладно!. У меня есть аналогичная ошибка с редуксом, когда я начинаю с React Redux.
Tung Duong 17 дек. 2018, в 09:20
0

resetQuizz внимание, что если вы используете resetQuizz в свойстве mapDispatchToProps компонента connect , вы собираетесь отправлять функции resetQuiz , что делает его thunk , поэтому вам потребуется специальное промежуточное ПО для обработки этого ( redux-thunk ). Я думаю, что оригинальная проблема - только в способе, которым отправлено оригинальное действие.
Pierre Criulanscy 17 дек. 2018, в 09:22
0

@TungDuong Можете ли вы увидеть мой обновленный код в вопросе, как я обновляю значения в этом объекте
ganesh kaspate 17 дек. 2018, в 11:41

Показать ещё 6 комментариев

Rakesh Makluri · Answer 3 · 2018-12-17T06-54-00.000Z

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

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

Изменение: Быстрое решение ваших проблем заключается в замене редуктора, как показано ниже:

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

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

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

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

Я только что обновил то же самое в вопросе
Способ, которым я обновляю это, также я добавил.
В компоненте, где вы добавили QuizData в критерии, фактически будет указываться внутренний объект initialState. Таким образом, любая модификация внутреннего объекта приведет к фактической модификации объекта initialState. (... состояние) будет копировать только свойства первого уровня. Можете ли вы добавить свой код компонента, где вы обновляете данные «критериев»?
object [tobeupdated] = event.target.value; здесь вы обновляете существующий объект, вместо этого вы можете сделать {... object, [tobeupdated]: event.target.value}
Это дает некоторые синтаксические ошибки
Здесь я делаю let newData = {... this.props.data};
Не могли бы вы добавить его в ответ, чтобы я мог проверить

Pierre Criulanscy · Answer 4 · 2018-12-17T06-43-00.000Z

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

Хорошо, я неправильно понял ваш вопрос. Можете ли вы показать нам код вашего компонента connect ? Я думаю, что вы, возможно, забыли действительно отправить действие.
экспорт подключения по умолчанию (mapStateToProps, {fetchListOfQuiz, updateQuestionViewMode, enableJob, resetQuiz}) (LandingScreen);
@ganeshkaspate у вас все еще есть проблема, чтобы не вернуть начальное состояние по умолчанию в вашем редукторе, кстати
Я добавил еще немного кода, как я обновляю эти данные
Не в коде, который вы разместили, «регистр по умолчанию» для редуктора QuizData все еще отсутствует
Это не очень хорошо, я не говорю о вашем действии «сброс», вам нужно разобраться со случаем, когда действие, данное в вашей функции QuizData не является одним из действий, которые вы обрабатываете