如何使用Redux跟踪React应用中的正确答案

时间:2019-09-04 17:58:49

标签: reactjs redux react-redux

我建立了一个React测验,需要跟踪正确的答案。每个问题都有一个正确的值,1表示正确,0表示不正确。当用户单击问题时,应用程序将进行快速检查,并在控制台日志中记录答案是否正确。我需要跟踪正确问题的数量,以便可以在测验结束时向用户显示他们的分数。  我正在使用Redux进行跟踪。我需要将每个正确的答案放入一个数组中,并返回该数组的长度以检查多少个问题是正确的

在大多数情况下,我已经正确设置了减速器和动作。

```
//Reducer
const initialState = {
  questions: [],
  answers: [],
  correct_answer: []
};
export default function(state = initialState, action) {
  switch (action.type) {

    case "CORRECT_ANSWERS":
      let add_correct = state.correct_answer.find(
        item => action.payload.id === item.id
      );
      if (add_correct) {
        add_correct += 1;
      } else {
        return {
          ...state,
          correct_answer: [...state.correct_answer, action.payload]
        };
      }
    default:
      return state;
  }
}

//Actions

export function getCorrectAnswer(correct) {
  store.dispatch({
    type: "CORRECT_ANSWER",
    payload: correct
  });
}

//Main Quiz component
 const correct_answer = useSelector(
    appState => appState.quizReducer.correct_answer.length
  );
```

使用useSelector调用变量时,数组的长度为0。给出正确答案后,其长度应增加1。

0 个答案:

没有答案