异步 API 调用，Redux React-Native

Posted 2023-02-22

【中文标题】异步 API 调用，Redux React-Native

【英文标题】：Async API Call, Redux React-Native

【发布时间】：2019-01-20 15:54:27

【问题描述】：

我最近开始学习 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);

我错过了什么/做错了什么？

【参考方案1】：

您需要将mapStateToProps func 定义为

movie : state.movie.movieResults

因为您将它们组合为

export default combineReducers(
  movie : movieReducer
);

【讨论】：

谢谢，非常感谢！想弄清楚这个问题，我很生气。

我现在面临另一个问题。道具更新但坏了。我的意思是它更新前 5-10 个然后它更新整个使一些数据重复

哦，好的，您可以单独创建一个包含相关详细信息的问题，以便更多用户回答。当我有空时，我会看看它。谢谢。

谢谢！一定会的！