有问题的减速器的设置：

Question

我错过了asyn调用如何在react-redux中工作的关键步骤/概念。

目前，我可以进行api调用（也可以看到通过chrome-dev-tools返回的数据）但是响应数据不是反映在申请状态;意味着测验对象的状态，默认情况下是一个空对象，不会更新。

我的期望是当asyn调用解析时，我解析quizReducer中的响应，并返回反映响应数据的新状态（不是变异状态）。

然而，每次调用时，更新后的状态都会返回一个空的测验对象（这是初始状态）。

我知道我错过了一些东西，但我无法弄清楚是什么;我真的很感激一些指示/解释。谢谢

该应用具有initialState / Preloaded状态，如下所示：

  export default {
   quizzes: [
     {id: 0, name: "quiz_name2", completed: false, selected: false}, 
     {id: 1, name: "quiz_name2", completed: false, selected: false}
   ],
   quiz: { questions: {} }
 };

有问题的减速器的设置：

    import initialState from './initialState';
    import quizConstants from '../constants/quizConstants';
    const actionTypes = quizConstants.actions

    // when app loads, user has not selected any quiz therefore 
    // initialState is an empty object 
    // here action is the payload we get when a quiz is selected (see QUIZ_SELETED action creator)


    export default function quiz(state=initialState.quiz, action) {
      switch(action.type){
        // when a quiz is selected, return new state
        case actionTypes.SELECT_QUIZ:
          return Object.assign(
            {}, 
            state, 
            {
              id: action.quiz.id,
              name: action.quiz.name,
              completed: action.quiz.completed,
              selected: !action.quiz.selected,
              fetching: action.quiz.fetching,
              fetched: action.quiz.fetched,
              questions: action.quiz.questions
            }
          )
        case actionTypes.REQUEST_QUIZ:
          return Object.assign(
            {},
            state, 
            {
              id: action.quiz.id,
              name: action.quiz.name,
              completed: action.quiz.completed,
              selected: !action.quiz.selected,
              fetching: !action.quiz.fetching,
              fetched: action.quiz.fetched,
              questions: action.quiz.questions 
            }
          )
        case actionTypes.RECEIVE_QUIZ:
          return Object.assign(
            {},
            state,
            {
              id: action.quiz.id,
              name: action.quiz.name,
              completed: action.quiz.completed,
              selected: !action.quiz.selected,
              fetching: action.quiz.fetching,
              fetched: !action.quiz.fetched,
              quiz: action.quiz.questions 
            }
          )
        default:
          return state 
      }
    };

index.js（rootreducer）：

    import { combineReducers } from 'redux';
    import { routerReducer } from 'react-router-redux';
    import quizzes from './quizzesReducer'
    import quiz  from './quizReducer';

    export default combineReducers({
      quizzes,
      quiz,
      routing: routerReducer
    });

QuizActionCreators

    import quizConstants from '../constants/quizConstants';
    import { quizzesEndPoint } from '../constants/appConstants';
    import axios from 'axios';

    const actionTypes = quizConstants.actions

    // select a quiz 
    export const selectQuiz = (quiz) => {
      return {
        type: actionTypes.SELECT_QUIZ,
        quiz
      }
    }; 

    const receiveQuiz = (quiz, data) => {
      return {
        type: actionTypes.RECEIVE_QUIZ,
        quiz,
        data
      }
    };

    // call when componentWillMount
    export const fetchQuiz = (quiz) => {
      console.log("Make an api request here")
      const url = quizzesEndPoint.concat(quiz.name)
      axios.get(url)
        .then(response => response.data)
        .then(data => receiveQuiz(quiz, data))
    }
    export default { selectQuiz, fetchQuiz};

Answer 1

在QuizActionCreator中，您的fetchQuiz正在调用receiveQuiz并传递quiz和data作为参数，后者拥有来自服务器的数据。我没有看到你的缩减器中的任何部分，你将action.data设置为州。

尝试在RECEIVE_QUIZ内为quizzesReducer添加处理程序，并将action.data返回到州。

//quizzesReducer.js
export default function (state = initialState.quizzes, action){
   ...
   if (action.type === actionTypes.RECEIVE_QUIZ) {
      return action.data
   }
   ...
};

api调用后应用程序状态不会更新

有问题的减速器的设置：

QuizActionCreators

1 个答案: