異步API調用，Redux React-Native

Question

我最近開始學習React-Native，並且正在嘗試實現Redux來管理我的應用程序的狀態。

根據我對React JS的經驗，我以與React JS通常相同的方式實現了狀態管理Redux。 除了異步api調用，其他所有內容似乎都可以正常工作。 商店中的道具會更改，但組件道具不會更改。

這是我設置Redux存儲的方式

import { createStore, compose, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reducer from './reducers';

//create initial state 
const initialState = {};

//create a variable that holds all the middleware
const middleware = [thunk, logger];

//create the store
const store = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(...middleware)
  )
);

export default store;

我的減速器組件

import { FETCH_REQUEST_BEGIN, FETCH_REQUEST_FAILED, DATA_FETCHED} from '../constants';


const initialState = {
  movieResults: null,
  fetching : false,
  failed : false
}

export default (state = initialState, actions)=>{

  switch(actions.type){

    case FETCH_REQUEST_BEGIN:
      return  {
        ...state,
        fetching : true
      };
    case DATA_FETCHED : 
      return {
        ...state,
        movieResults : actions.payload,
        fetchin : false
      }
    case FETCH_REQUEST_FAILED:
      return  {
        ...state,
        failed : true
      };
    default : 
      return state;
  }
}

這是根減少劑

import { combineReducers } from 'redux';
import movieReducer from './movieReducer';


export default combineReducers({
  movie : movieReducer
});

動作成分

import axios from 'axios';

import { FETCH_REQUEST_BEGIN, FETCH_REQUEST_FAILED } from '../constants';

const apiRequest = (url, type) => {
  return dispatch => {
    dispatch({
      type : FETCH_REQUEST_BEGIN
    });

    axios.get(url)
      .then((results) => {
        dispatch({
          type : type,
          payload : results.data
        });
      }).catch((error) => {
        dispatch({
          type : FETCH_REQUEST_FAILED,
          payload : error
        });
      });
  }
}

export default apiRequest;

主要成分

import React, { Component } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { API, DATA_FETCHED } from '../constants';
import { apiRequest } from '../actions';
import { connect } from 'react-redux';

class Home extends Component {

  componentWillMount() {
    const discoverUrlMovies =`https://jsonplaceholder.typicode.com/posts`;
    this.fetchData(discoverUrlMovies, DATA_FETCHED);
  }

  fetchData = (url, type) => {
    this.props.apiRequest(url, type);
  }

  shouldComponentUpdate(nextProps, prevProps){
    return nextProps != prevProps
  }

  render() {
    const { movie }  = this.props;

    //console out the props
    console.log('this.props', this.props);

    let displayMovies;

    if(movie === undefined || movie === null ){
      displayMovies = <ActivityIndicator size = 'large' color = '#121222'/>
    }else {
      displayMovies = <Text>Working</Text>
    }
    return (
      <View style = {{flex: 1}}>
        <Text>Home</Text>
        {
          //display result 
          displayMovies
        }
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    movie : state.movieResults
  }
}
export default connect(mapStateToProps, { apiRequest })(Home);

我想念/做錯了什么？

Answer 1

您需要將mapStateToProps函數定義為

movie : state.movie.movieResults

因為您將它們組合為

export default combineReducers({
  movie : movieReducer
});