Я новичок в 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
})
}
}
Что я делаю не так?
вам просто нужно вернуть начальное значение в редуктор, например, так:
export default function QuizData(state = initialState, action) {
switch (action.type) {
case RESET_QUIZ:
return initialState
default:
return state;
}
}
Я думаю, что вы не так с отправкой действий
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;
}
}
return Object.assign({}, initialState, {error: false})
я редактировал.
Может быть, вы не делаете глубокие копии в других действиях.
Можете ли вы добавить код редуктора для других действий?
Изменение: Быстрое решение ваших проблем заключается в замене редуктора, как показано ниже:
export default function QuizData(state = JSON.parse(JSON.stringify(initialState)), action) {
....
}
Примечание: JSON.parse(JSON.stringify(initialState)) работает для вашего случая, но не для всех случаев, и не является хорошим решением. Вы должны написать глубокую логику для этого.
Правильное/правильное решение:
Вы должны изменить логику вашего компонента, чтобы не изменять данные хранилища напрямую и обновлять их с помощью других действий.
Вы забыли вернуть 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
? Я думаю, что вы, возможно, забыли действительно отправить действие.
return initialState
если хотите сбросить до этого? Т.е.case RESET_QUIZ: return initialState;