Redux 商店更新奇怪

Question

我有一个看起来像这样的代码

减速器

const initState = { isLoggedIn: false };
const isLoggedInReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOG_IN":
      return { isLoggedIn: true };
    case "LOG_OUT":
      return { isLoggedIn: false };
    default:
      return {isLoggedIn:false};
  }
};

export default isLoggedInReducer;

动作

export const logIn = () => {
    return {
        type:'LOG_IN'
    }
}

export const logOut = () => {
    return {
        type:'LOG_OUT'
    }
}

屏幕

import React from 'react'
import {useDispatch,useSelector} from 'react-redux'
import {logIn , logOut} from '../redux/actions/isLoggedInAction'

const AuthScreen = () => {
    console.log('auth page re-rendered')
    let status = useSelector(state => state.isLoggedIn)
    console.log(status)
    const dispatch = useDispatch()
    return <>
        <h1> auth is {status} status</h1>
        <button onClick={()=>dispatch(logIn())}>authenticate me</button>
        <button onClick={()=>dispatch(logOut())}>un auth me</button>
    </>
}

export default AuthScreen

问题是，某些原因导致应用呈现两次，并更新商店

除非我调度一个动作，否则变量不应该改变，我显然没有。此外，该变量的值已注销，但不会打印在 h1 标签内。

如果我将减速器的默认情况更改为类似

const initState = { isLoggedIn: false };
const isLoggedInReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOG_IN":
      return { isLoggedIn: true };
    case "LOG_OUT":
      return { isLoggedIn: false };
    default:
      return {isLoggedIn:' hello world'};
  }
};

export default isLoggedInReducer;

然后我得到这个输出

以上输出表明默认情况以某种方式运行。但同样，我没有向它发送任何动作。我只是使用“useSelect”读取数据，但有些东西正在调度我不知道的操作。

我对 redux 很陌生，正在努力学习。感谢您抽出宝贵时间。

Answer 1

在您的默认情况下，按原样返回状态：

default:
    return state;

如果您返回一个新对象，React 会将状态视为已更改并重新渲染组件，因为默认情况下 ref 会检查相等性。