React Redux中从Reducer/Store读取值为何出现undefined？

问题描述 #

使用React Redux开发时，从URL参数获取micSessionId并存入Reducer，但在Component1中读取该值时显示undefined。App.js可正常获取micSessionId并执行dispatch更新动作，相关代码如下：

URL地址 #

http://localhost:3000?micSessionId=89e2ff80-c1d7

App.js代码 #

import * as types from '../lib/store/action';
import { useDispatch } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();
  useEffect(function () {
    const params = new URLSearchParams(window.location.search);
    const SessionId = params.get('micSessionId');

    if (SessionId != null && SessionId.length) {
      console.log("saving SessionId: " + SessionId);
      dispatch(
        types.updateData({
          micSessionId: SessionId
        })
      );
    }
 })
}

Reducer.js代码 #

import * as types from './action';

export const initialState = {
    recDetails: {
        name: '',
       country: '',
        city: ''
    },
    micSessionId: ''
}

const Datareducer = (state = initialState, action) => {
    switch (action.type) {
        case types.UPDATE__DATA:
            const output = action.payload;
            if (output.recDetails) {
                state.recDetails = output.recDetails;
            }
            if (output.micSessionId) {
                state.micSessionId = output.micSessionId;
            }
            return {
                ...state,
            }
            break;
        default:
            return state;
    }
}

export default Datareducer;

Action.js代码 #

export const UPDATE_DATA = 'UPDATE_DATA';

export const updateData = payload => ({
    type: UPDATE_DATA,
    payload
});

Component1.js代码 #

import * as types from '../../lib/store/action';
import { useSelector, useDispatch } from 'react-redux';

const Component1 = () => {
  const { SessionId } = useSelector(state => state.app.DataReducer.micSessionId);
  const uDispatch = useDispatch();

  useEffect(() => {
      alert(SessionId);
  })
}

问题原因及修正方案 #

1. Action Type拼写不匹配 #

Reducer中使用的types.UPDATE__DATA多了一个下划线，与Action.js中定义的UPDATE_DATA不一致，导致Reducer无法识别dispatch的动作，不会更新state。

修正后的Reducer.js关键代码：

switch (action.type) {
    // 修正为与Action一致的type
    case types.UPDATE_DATA:
        const output = action.payload;
        // 采用Immutable方式更新state，避免直接修改原对象
        return {
            ...state,
            recDetails: output.recDetails ? { ...state.recDetails, ...output.recDetails } : state.recDetails,
            micSessionId: output.micSessionId || state.micSessionId
        }
    default:
        return state;
}

2. useSelector值解构错误 #

state.app.DataReducer.micSessionId本身是字符串类型，不能用对象解构const { SessionId } = ...，应直接赋值。

修正后的Component1.js关键代码：

// 直接获取值，无需解构
const SessionId = useSelector(state => state.app.DataReducer.micSessionId);

useEffect(() => {
    alert(SessionId);
}, [SessionId]); // 添加依赖项，确保值更新时触发alert

3. Reducer直接修改原state #

原Reducer中直接赋值state.recDetails = output.recDetails违反Redux Immutable更新原则，可能导致state更新不被检测到。修正为创建新对象的方式更新state（见上面Reducer修正代码）。

4. useEffect缺失依赖项 #

App.js中的useEffect未添加dispatch作为依赖项，可能导致dispatch引用失效。

修正后的App.js关键代码：

useEffect(() => {
    // 原有逻辑
}, [dispatch]); // 添加dispatch依赖

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