React Native中Redux状态不更新求助：接口数据无法同步到组件

1. Action Type 导入路径不匹配 #

Reducer中导入GET_MOVIES的路径与定义它的文件不一致，导致reducer无法识别action类型，无法更新state。

修复Reducer.js：
将导入路径改为和Actions.js一致的./actionsType：

import { GET_MOVIES } from "./actionsType"; // 修正路径

const initialState = {
  movies: [],
};

function moviesReducer(state = initialState, action) {
  switch (action.type) {
    case GET_MOVIES:
      return { ...state, movies: action.payload };
    default:
      return state;
  }
}
export default moviesReducer;

2. Action 错误捕获逻辑错位 #

原代码的try-catch未包裹async函数内部的请求代码，无法捕获axios请求的异常，需调整捕获位置。

修复Actions.js：
将try-catch移至async函数内部：

import { GET_MOVIES } from "./actionsType";
import axios from "axios";

const BASE_URL = "https://reactnative.dev/movies.json";

export const getMovies = () => {
  return async (dispatch) => {
    try { // 移至async函数内部，捕获请求异常
      const res = await axios.get(BASE_URL);
      console.log(res.data.movies);
      const MoviesList = res.data.movies;
      console.log(MoviesList);
      if (MoviesList) {
        dispatch({
          type: GET_MOVIES,
          payload: MoviesList,
        });
      } else {
        console.log("Unable to fetch");
      }
    } catch (error) {
      console.log(error);
    }
  };
};

3. 确认根组件已用Redux Provider包裹 #

若根组件未用Provider包裹，组件无法连接Redux store，将始终获取初始空数组。

修复App.js（示例）：

import { Provider } from 'react-redux';
import { store } from './redux/store'; // 根据你的实际路径调整
import Movies from './Movies'; // 你的Movies组件路径

export default function App() {
  return (
    <Provider store={store}>
      <Movies />
    </Provider>
  );
}

验证效果 #

完成上述修改后重新运行项目：

• 组件会在useEffect中触发getMovies action
• 请求成功后dispatch正确的action，reducer更新state
• useSelector将获取到更新后的movies数据，FlatList可正常渲染内容

内容的提问来源于stack exchange，提问作者Basit Mir