使用redux結構執行任務後，組件未在react-native中更新

Question

我正在使用react-native構建應用程序，遵循redux概念，現在我陷入了一個問題，我的組件沒有更新，因爲它們在調度後應該更新一種行爲。

解釋一下情節，我有一個React類「QuestionScreen」，我希望在頁面打開時立即調用API，但是在API完成其工作並且完成時應該呈現加載器，問題應該appear.so這裏是低於

PS我的代碼：林新反應本地和超新Redux的概念，因此與解釋的一點幫助將是不錯

QuestionScreen.js

 

    function mapStateToProps(state) { 
     return { 
      session: state.questionsReducer.session 
     } 
    } 

    function mapDispatchToProps(dispatch) { 
     return bindActionCreators(Actions, dispatch); 
    } 

    class QuestionsScreen extends Component { 

     static navigationOptions = ({navigation}) => ({ 
      title: `${navigation.state.params.title}`, 
      headerRight: , 
      headerTintColor: '#0b3484', 
     }); 

     constructor(props) { 
      super(props); 
      this.state = { 
       params: this.props.navigation.state.params.passProps 
      }; 

      this.fetchSessionQuestions = this.fetchSessionQuestions.bind(this); 
     } 

     fetchSessionQuestions() { 
      this.props.fetchPracticeQuesions({ 
       URL: BASE_URL + '/api/dashboard/get_chapter_question/', 
       chapter: this.state.params.chapter_name 
      }); 

     } 

     componentDidMount() { 
      this.fetchSessionQuestions(); 

     } 

     render() { 


      const {navigate} = this.props.navigation; 

      if (this.props.session.isLoading) { 
       return (
        // Loader here 
       ); 
      } 
      else { 

       const questions = this.props.session.questions; 

       return (

        // Some questions logic here 

       ); 
      } 

     } 
    } 

    export default connect(mapStateToProps, mapDispatchToProps)(QuestionsScreen); 

個questionsReducer.js

 

    import * as types from '../actions/actionTypes'; 

    const initialState = { 
     session: { 
      isLoading: true, 
      currentQuestion: 0, 
      questions: [], 
      score: 0, 
      timeTaken: 0, 
      attempted: 0 
     } 
    }; 

    const newState = JSON.parse(JSON.stringify(initialState)); 

    export default function questionsReducer(state = initialState, action) { 
     switch (action.type) { 
      case types.NEXT_QUESTION: 
       newState.session.currentQuestion = newState.session.currentQuestion + action.payload; 
       return newState; 
      case types.FETCH_PRACTICE_QUESTION: 

       fetch(action.payload.URL, { 
        method: 'POST', 
        body: JSON.stringify({ 
         username: 'student', 
         password: 'pass1234', 
         chapter: action.payload.chapter 
        }) 
       }). 
       then((response) => response.json()). 
       then((responseJson) => { 
        newState.session.questions = responseJson; 
        newState.session.isLoading = false; 
       }); 
       console.log(newState); 
       return newState; 
      default: 
       return state; 
     } 
    } 

現在具有probelem IM的是，在我的QuestionScreen的props.session保持不變，所以裝載機不斷旋轉，甚至派遣的行動後，我應該怎麼辦？

，是的一兩件事，我檢查使用記錄器控制檯國地位和咚中間件，國家印有預期，顯示我正確的值有

Answer 1

你應該使用中間件作爲終極版 - 咚實現異步動作。你也不應該在reducer中使用fetch，你應該在請求開始，最重要的成功和請求錯誤時調度3個事件。事情是這樣的：

export const callApi = ((fetchUrl) => (dispatch) => { 
    dispatch(requestBegin()); 
    let body = (method === 'GET') ? undefined : JSON.stringify(data); 
    return fetch(fetchUrl, { 
    method, 
    body, 
    }) 
    .then(checkStatus) 
    .then(parseJSON) 
    .then(function(data) { 
    dispatch(requestSuccess(data); 
    }).catch(function(error) { 
    dispatch(requestError(data)); 
    }) 
}); 

此外，您還可以閱讀有關異步操作here