Redux React Native问题：Action无法将数据传递至Reducer

嘿，作为Redux新手踩点坑太正常啦，咱们一步步来排查你的问题～

首先排查Action里的异步逻辑是否正确触发dispatch #

你提到能看到API响应，说明请求本身没问题，但关键是要在请求成功后，通过dispatch把数据传递给Reducer。这里要注意异步Action必须依赖redux-thunk中间件，不然Redux无法识别你返回的函数类型Action。

先给你一个标准的异步Action写法参考：

export const DATA_AVAILABLE = 'DATA_AVAILABLE';
// 可选：添加加载/错误状态的action类型
export const DATA_LOADING = 'DATA_LOADING';
export const DATA_ERROR = 'DATA_ERROR';

export function getData(){
  return (dispatch) => {
    // 先dispatch加载状态，提升用户体验
    dispatch({ type: DATA_LOADING });
    
    // 用fetch举例，你可以换成自己的API请求方式
    fetch('你的API地址')
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(apiData => {
        // 核心：请求成功后，把数据通过payload传给Reducer
        dispatch({
          type: DATA_AVAILABLE,
          payload: apiData
        });
      })
      .catch(error => {
        dispatch({
          type: DATA_ERROR,
          payload: error.message
        });
      });
  };
}

然后检查Reducer是否正确处理Action #

Reducer是纯函数，要监听对应的Action类型，并且不可直接修改原state，必须返回新的状态对象。这里给你一个匹配上面Action的Reducer示例：

import { DATA_AVAILABLE, DATA_LOADING, DATA_ERROR } from './actions';

// 初始状态要包含数据、加载、错误三个状态字段
const initialState = {
  data: null,
  isLoading: false,
  error: null
};

export const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case DATA_LOADING:
      return {
        ...state, // 解构原state，保留其他字段
        isLoading: true,
        error: null // 清空之前的错误
      };
    case DATA_AVAILABLE:
      return {
        ...state,
        isLoading: false,
        data: action.payload // 把Action里的payload赋值给state.data
      };
    case DATA_ERROR:
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    default:
      return state; // 必须返回默认state，不要遗漏
  }
};

另外别忘了把这个Reducer合并到根Reducer（如果用了combineReducers）：

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

const rootReducer = combineReducers({
  appData: dataReducer // 这个key会决定组件中取状态的路径
});

export default rootReducer;

最后在home.js中连接Redux并渲染状态 #

现在推荐用React-Redux的Hooks（useSelector和useDispatch）来连接状态，比传统的connect更直观。

首先确保你的App已经被Provider包裹（在入口文件比如index.js中）：

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // 必须安装并应用这个中间件！
import rootReducer from './reducers';

// 创建store时传入中间件，处理异步Action
const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

然后在home.js中编写组件：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getData } from './actions';

const Home = () => {
  // 从store中取出状态，路径对应根Reducer里的key和dataReducer的字段
  const { data, isLoading, error } = useSelector(state => state.appData);
  const dispatch = useDispatch();

  // 组件挂载时触发API请求
  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);

  // 根据不同状态渲染不同内容
  if (isLoading) {
    return <div>数据加载中...</div>;
  }

  if (error) {
    return <div>请求出错：{error}</div>;
  }

  // 数据存在时渲染内容，这里根据你的API返回结构调整
  return (
    <div className="home">
      <h2>获取到的数据</h2>
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Home;

新手最容易踩的几个坑 #

1. 忘记安装并应用redux-thunk中间件，导致异步Action无法执行
2. Action里没有在API回调中调用dispatch传递数据
3. Reducer直接修改原state（比如state.data = action.payload），违反Redux的不可变原则
4. 组件中useSelector的路径写错，导致拿不到状态

内容的提问来源于stack exchange，提问作者Alessio Chiffi