异步 API 调用，Redux React-Native

Question

我最近开始学习 React-Native，我正在尝试实施 Redux 来管理我的应用程序的状态。

由于我有使用 React JS 的经验，我实现了状态管理 Redux，就像我通常使用 React JS 一样。除了异步 api 调用外，一切似乎都有效。 store 中的 props 发生变化，但组件 props 中没有变化。

这是我设置 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 func 定义为

movie : state.movie.movieResults

因为您将它们组合为

export default combineReducers({
  movie : movieReducer
});