Redux返回空next state，获取更新状态失败求助

常见问题及解决方法 #

1. 检查Reducer初始状态 #

确保Reducer设置了明确的初始状态，避免返回undefined导致空状态：

// 错误示例：初始状态未定义
const myReducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE_DATA':
      return action.payload;
    default:
      return state; // 初始状态为undefined，会触发空状态
  }
}

// 正确示例：根据业务需求设置初始状态
const myReducer = (state = [], action) => { // 也可设置为{}等初始结构
  switch(action.type) {
    case 'UPDATE_DATA':
      return action.payload;
    default:
      return state;
  }
}

2. 验证Reducer是否正确处理Action #

确认action类型拼写完全匹配，且每个分支返回新状态，default分支必须返回当前状态：

// 确保Action类型拼写一致
export const updateData = (data) => ({
  type: 'UPDATE_DATA', // 注意大小写、特殊字符完全匹配
  payload: data
});

// Reducer中正确匹配并返回新状态
const myReducer = (state = [], action) => {
  switch(action.type) {
    case 'UPDATE_DATA':
      return [...state, action.payload]; // 返回新数组/对象，禁止直接修改原状态
    default:
      return state; // 必须保留，否则未匹配到action时会返回undefined
  }
}

3. 确认Store配置正确 #

使用combineReducers时，组件取状态的路径要和Store中定义的key一致：

// Store创建代码
import { createStore, combineReducers } from 'redux';
import myReducer from './reducers/myReducer';

const rootReducer = combineReducers({
  data: myReducer // 这里的key是data，组件中需通过state.data获取状态
});

export const store = createStore(rootReducer);

4. 组件中正确获取状态 #

确保根组件被Provider包裹，且useSelector的取值路径正确：

// 根组件
import { Provider } from 'react-redux';
import { store } from './store';

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

// 子组件
import { useSelector } from 'react-redux';

function YourComponent() {
  const data = useSelector(state => state.data); // 对应Store中combineReducers的key
  console.log(data); // 此时可获取到更新后的状态
  return <div>数据数量：{data.length}</div>;
}

5. 检查Action是否正确分发 #

确保使用useDispatch正确触发action：

import { useDispatch } from 'react-redux';
import { updateData } from './actions';

function YourComponent() {
  const dispatch = useDispatch();
  
  const handleUpdate = () => {
    dispatch(updateData('新数据')); // 正确分发action触发状态更新
  };
  
  return <button onClick={handleUpdate}>添加数据</button>;
}

内容的提问来源于stack exchange，提问作者Shafhad Khan