Redux reducer状态无法更新：dispatch正确action后state仍无变化求助

核心问题分析 #

1. dispatch后立即读取状态是旧值：在axios回调里，dispatch之后立刻执行setNews(data)，此时组件中的data还是初始的空数组——状态更新会触发组件重渲染，新的data要等组件重新渲染后才能获取到，所以这一步存的是旧值，导致news始终为空。
2. 冗余的本地状态：你已经从状态层获取了data，完全没必要再维护一个本地的news状态，直接使用状态层的data渲染即可，多一层状态同步反而容易出错。

修正后的代码 #

News.js（推荐方案：去掉本地状态，直接使用状态层数据） #

import React, { useEffect } from "react";
import { useStateValue } from "../StateProvider";
import axios from "axios";

function News() {
  const [{ data }, dispatch] = useStateValue();

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos").then((res) => {
      dispatch({
        type: "FETCH_NEWS",
        payload: res.data,
      });
    });
  }, []);

  // 直接渲染状态层的data
  return (
    <div className="App">
      <div className="App-header">
        {/* 数组直接渲染会变成逗号分隔字符串，建议转JSON或遍历渲染 */}
        {JSON.stringify(data)}
      </div>
    </div>
  );
}

export default News;

如果确实需要维护本地状态（比如有额外处理逻辑） #

通过useEffect监听状态层data的变化，同步更新本地news：

import React, { useState, useEffect } from "react";
import { useStateValue } from "../StateProvider";
import axios from "axios";

function News() {
  const [{ data }, dispatch] = useStateValue();
  const [news, setNews] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos").then((res) => {
      dispatch({
        type: "FETCH_NEWS",
        payload: res.data,
      });
    });
  }, []);

  // 监听data变化，同步更新本地news
  useEffect(() => {
    setNews(data);
  }, [data]);

  return (
    <div className="App">
      <div className="App-header">
        {JSON.stringify(news)}
      </div>
    </div>
  );
}

export default News;

补充说明 #

你的reducer.js和StateProvider.js代码逻辑是正确的，状态层的data已经被正确更新，只是组件中获取和使用状态的方式有误。

内容的提问来源于stack exchange，提问作者Mahmoud Rottab