React-Redux应用：同时更新本地状态与Redux状态及状态不更新问题

看起来你遇到的核心问题是Redux状态没跟着ADD_ENTRY action更新——虽然能看到action触发了，Firebase的本地推送也成功，但Redux这边就是没同步。我从你给出的代码片段入手，一步步帮你排查解决：

1. 先修复Reducer的核心问题 #

你贴的Reducer代码里，case 'ADD_ENTRY':后面的retur...明显没写完，这大概率是问题根源。Redux的Reducer有个硬性要求：必须返回新的状态引用，绝对不能直接修改原状态（Redux靠状态引用变化来检测更新）。

错误示例（直接修改原状态）： #

case 'ADD_ENTRY':
  state.push(action); // 直接改原数组，Redux完全检测不到变化
  return state;

正确写法（返回新数组）： #

export const AddReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_ENTRY':
      // 用展开运算符创建新数组，把新条目加进去
      return [...state, action];
      // 如果你的action里有payload字段（Redux常用规范），就改成return [...state, action.payload];
    default:
      // 必须保留default分支，否则非匹配的action会让Reducer返回undefined，直接炸状态
      return state;
  }
};

2. 确认Action的结构合理性 #

你的addName action creator是把传入的action对象展开后加type，这里要注意调用时传的参数是否正确。比如你应该传具体的条目数据：

// 调用时要传实际的条目对象，而不是空的action
dispatch(addName({ name: "Yash", id: Date.now() }));

如果想贴合Redux的通用规范，可以调整action creator，明确用payload字段承载数据：

export const addName = (payload) => { 
  return { 
    type: 'ADD_ENTRY', 
    payload 
  }; 
};

对应的Reducer里就用action.payload来取数据。

3. 检查Store的配置是否到位 #

要确保你的Reducer已经正确注册到Redux Store里，比如：

import { createStore, combineReducers } from 'redux';
import { AddReducer } from './path-to-your-reducer';

// 合并Reducer（如果有多个的话）
const rootReducer = combineReducers({
  entries: AddReducer, // 这个key就是你在组件里取状态的路径
});

const store = createStore(rootReducer);
export default store;

然后在组件里要用useSelector（Hook方式）或者connect（高阶组件方式）获取Redux状态，比如：

import { useSelector, useDispatch } from 'react-redux';
import { addName } from './path-to-your-action';

function YourComponent() {
  // 对应store里注册的key
  const entries = useSelector(state => state.entries);
  const dispatch = useDispatch();

  const handleAddName = () => {
    const newEntry = { name: "New Name" };
    // 先处理Firebase推送，成功后再dispatch action更新Redux状态
    pushToFirebase(newEntry)
      .then(() => dispatch(addName(newEntry)))
      .catch(err => console.error("Firebase推送失败：", err));
  };

  return (
    // 你的组件内容
  );
}

4. 实用调试技巧 #

• 在Reducer里加console.log，确认action内容和初始状态是否符合预期：

  export const AddReducer = (state = [], action) => {
    console.log("当前状态：", state);
    console.log("收到的action：", action);
    switch (action.type) {
      case 'ADD_ENTRY':
        return [...state, action.payload];
      default:
        return state;
    }
  };
  

• 用Redux DevTools直观查看状态变化和action触发轨迹，能快速定位是action没触发，还是Reducer没返回新状态。

总结一下：你的问题大概率是Reducer没正确返回新状态数组，导致Redux检测不到更新。按照上面的步骤调整后，应该就能同步Redux状态了。

内容的提问来源于stack exchange，提问作者Yash Choksi