React Native登录页使用Redux+Thunk时，如何获取正确Props值？

嘿，我之前在做React Native + Redux-Thunk的登录功能时，也踩过不少从action取状态的坑，给你几个实用的排查方向和解决方案，应该能帮到你！

因为用了Thunk中间件，你的登录action应该是一个返回函数的异步action，要确保它在不同阶段dispatch对应的action类型——比如请求开始时触发LOGIN_REQUEST（设置isFetching为true），成功后触发LOGIN_SUCCESS（携带token），失败时触发LOGIN_FAILURE。

举个正确的action示例：

// actions/authActions.js
export const login = (credentials) => async (dispatch) => {
  // 登录开始，标记正在加载
  dispatch({ type: 'LOGIN_REQUEST' });
  
  try {
    const response = await fetch('你的NodeJS登录接口地址', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(credentials),
    });
    const data = await response.json();
    
    // 登录成功，传递token到reducer
    dispatch({ 
      type: 'LOGIN_SUCCESS', 
      payload: { token: data.token } 
    });
  } catch (error) {
    // 登录失败，传递错误信息
    dispatch({ 
      type: 'LOGIN_FAILURE', 
      payload: { error: error.message } 
    });
  }
};

Reducer是处理状态变化的核心，要确保它正确响应每个action类型，并且返回新的状态对象（不能直接修改原状态）。初始化状态里要包含isFetching、token、error这些关键字段：

// reducers/authReducer.js
const initialState = {
  isFetching: false,
  token: null,
  error: null,
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      return {
        ...state,
        isFetching: true,
        error: null, // 清除之前的错误状态
      };
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        isFetching: false,
        token: action.payload.token,
      };
    case 'LOGIN_FAILURE':
      return {
        ...state,
        isFetching: false,
        error: action.payload.error,
      };
    default:
      return state;
  }
};

export default authReducer;

在登录组件里，你需要通过Redux的Hooks（useSelector和useDispatch）或者connect高阶组件来获取状态和触发action。这里推荐用Hooks，更简洁：

// components/LoginScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { login } from '../actions/authActions';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  // 从Redux store里取auth模块的状态
  const { isFetching, token, error } = useSelector(state => state.auth);
  const dispatch = useDispatch();

  const handleLogin = () => {
    // 触发登录action
    dispatch(login({ email, password }));
  };

  return (
    <View style={{ padding: 20, marginTop: 50 }}>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
        style={{ borderBottomWidth: 1, marginBottom: 15 }}
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ borderBottomWidth: 1, marginBottom: 20 }}
      />
      
      <Button 
        title="登录" 
        onPress={handleLogin} 
        disabled={isFetching} // 加载时禁用按钮
      />
      
      {/* 显示加载指示器 */}
      {isFetching && (
        <ActivityIndicator 
          size="large" 
          color="#0066cc" 
          style={{ marginTop: 20 }} 
        />
      )}
      
      {/* 登录成功后展示token */}
      {token && (
        <Text style={{ marginTop: 20, color: 'green' }}>
          登录成功！Token: {token}
        </Text>
      )}
      
      {/* 显示错误信息 */}
      {error && (
        <Text style={{ marginTop: 20, color: 'red' }}>
          登录失败: {error}
        </Text>
      )}
    </View>
  );
};

export default LoginScreen;

• Store配置要加Thunk中间件：确保你的Redux store正确应用了Thunk，否则异步action不会生效：

// store.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import authReducer from './reducers/authReducer';

// 合并reducers，auth是你在组件里取状态的键名
const rootReducer = combineReducers({
  auth: authReducer,
});

// 创建store并应用Thunk中间件
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

• 组件要被Provider包裹：在根组件（比如App.js）里用Provider把整个应用包裹起来，这样所有子组件都能访问Redux store：

// App.js
import { Provider } from 'react-redux';
import store from './store';
import LoginScreen from './components/LoginScreen';

const App = () => {
  return (
    <Provider store={store}>
      <LoginScreen />
    </Provider>
  );
};

export default App;

• 检查接口返回格式：确认你的NodeJS接口返回的token字段和你在action里取的一致（比如接口返回{ "token": "xxx" }，那data.token才是对的）。
• 用Redux DevTools调试：打开Redux DevTools，你能清楚看到每个action的dispatch情况，以及状态的变化，快速定位哪里出了问题。

如果按照这些步骤排查后还是有问题，可以把你的action、reducer或者组件的具体代码贴出来，我再帮你细化分析！

内容的提问来源于stack exchange，提问作者William Pfaffe