React Native中使用Redux获取组件状态及天气APP问题求助

嘿，我看到你在开发OpenWeatherMap天气应用时，用Redux更新状态遇到了一堆错误，别着急，咱们一步步从Redux核心流程的几个关键环节排查问题：

Redux异步action必须依赖中间件（比如redux-thunk），而且action类型要尽量用常量避免拼写错误，这是高频出错点：

• 首先要定义action类型常量：

export const FETCH_WEATHER_LOADING = 'FETCH_WEATHER_LOADING';
export const FETCH_WEATHER_SUCCESS = 'FETCH_WEATHER_SUCCESS';
export const FETCH_WEATHER_FAILURE = 'FETCH_WEATHER_FAILURE';

• 然后异步action的写法要符合thunk要求，不能直接返回普通对象：

export const fetchWeatherData = (cityName) => {
  return async (dispatch) => {
    dispatch({ type: FETCH_WEATHER_LOADING });
    try {
      // 记得替换成你的OpenWeatherMap API密钥
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=你的API_KEY`);
      if (!response.ok) throw new Error('请求失败');
      const data = await response.json();
      dispatch({ type: FETCH_WEATHER_SUCCESS, payload: data });
    } catch (error) {
      dispatch({ type: FETCH_WEATHER_FAILURE, payload: error.message });
    }
  };
};

Reducer必须是纯函数，不能直接修改原状态，还要处理所有可能的action类型：

import { FETCH_WEATHER_LOADING, FETCH_WEATHER_SUCCESS, FETCH_WEATHER_FAILURE } from '../Actions';

// 一定要设置初始状态，避免state为undefined
const initialState = {
  weatherData: null,
  loading: false,
  error: null
};

const weatherReducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_WEATHER_LOADING:
      // 用扩展运算符返回新状态，不能直接改state.loading
      return { ...state, loading: true, error: null };
    case FETCH_WEATHER_SUCCESS:
      return { ...state, loading: false, weatherData: action.payload };
    case FETCH_WEATHER_FAILURE:
      return { ...state, loading: false, error: action.payload };
    // 必须保留default分支，返回原状态
    default:
      return state;
  }
};

export default weatherReducer;

用combineReducers合并子reducer时，要注意key的命名（组件取状态时会用到这个key）：

import { combineReducers } from 'redux';
// 注意引入路径要和你的文件结构匹配
import weatherReducer from './screens/Reducer';

const rootReducer = combineReducers({
  // 这里的weather就是后续组件取状态的入口key
  weather: weatherReducer
});

export default rootReducer;

必须添加redux-thunk中间件才能处理异步action，否则会报错“action must be plain object”：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/mainReducer';

const store = createStore(
  rootReducer,
  // 把thunk加入中间件
  applyMiddleware(thunk)
);

export default store;

确保组件正确连接Redux，调用action的方式没错：
如果是类组件，用connect绑定action：

import React from 'react';
import { connect } from 'react-redux';
import { fetchWeatherData } from '../Actions';

class SearchScreen extends React.Component {
  state = {
    searchQuery: ''
  };

  handleSearch = () => {
    const { searchQuery } = this.state;
    // 先判断输入是否为空，避免无效请求
    if (searchQuery.trim()) {
      // 调用通过connect绑定到props的action
      this.props.fetchWeatherData(searchQuery);
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.searchQuery}
          onChange={(e) => this.setState({ searchQuery: e.target.value })}
          placeholder="输入城市名"
        />
        <button onClick={this.handleSearch}>搜索天气</button>
      </div>
    );
  }
}

// 把action绑定到组件props
const mapDispatchToProps = {
  fetchWeatherData
};

export default connect(null, mapDispatchToProps)(SearchScreen);

如果是函数组件，用Redux Hooks更简洁：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { fetchWeatherData } from '../Actions';

const SearchScreen = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const dispatch = useDispatch();

  const handleSearch = () => {
    if (searchQuery.trim()) {
      dispatch(fetchWeatherData(searchQuery));
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="输入城市名"
      />
      <button onClick={handleSearch}>搜索天气</button>
    </div>
  );
};

export default SearchScreen;

另外还有几个容易踩坑的点：

• 确认你的OpenWeatherMap API密钥是有效的，并且请求URL的参数格式正确
• 如果是浏览器环境，注意跨域问题（可以用代理或者OpenWeatherMap提供的CORS支持）
• 打开浏览器控制台看具体错误信息，比如“cannot read property of undefined”可能是状态路径写错，“invalid API key”就是密钥问题

内容的提问来源于stack exchange，提问作者Ronit Mankad