我无法在Redux中切换布尔值

kmynzznz 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(156)

我正在做一个动漫项目。我的问题是，当我点击输入时，我想把它带到最前面。所以，我使用了“webkitRequestFullscreen（）"，但我不能将布尔值切换为true来使它生效。我寻找了一些解决方案，但我猜，我使用的Redux版本与他们的版本不同，我不理解他们。
下面是我的初始状态和减速器功能：

const initialState = {
  items: [],
  fullScreen: false,
}
reducers: {
    toggleInputScreen: (state, action) => {
      const id = action.payload
      state.fullScreen = !state.fullScreen
    },
  },

主要组成部分：

let activeFullScreen = useSelector((state) => state.anime.fullScreen)
  // console.log(activeFullScreen)

  if (activeFullScreen) {
    return inputRef.current.webkitRequestFullscreen()
  }
<div
    className="input-container"
    onClick={() => dispatch(toggleInputScreen())}
    id="input-div">
    <input type="search" placeholder="Search..." ref={inputRef} />
</div>

我知道减速器功能是一个彻底的灾难。我怎么能切换全屏布尔当我点击输入？提前感谢。

redux

来源：https://stackoverflow.com/questions/73750572/i-cannot-toggle-my-boolean-value-in-redux

1条答案

按热度按时间

bgtovc5b1#

可能是减速器功能问题。
在Redux中，状态是不可变的，这意味着你永远不会修改状态，而是创建一个新的副本。另一个错误是，你必须在reducer函数中返回新的状态。
reducer是一种函数，它将当前的state和一个action作为参数，并返回一个新的state结果。[...]它们不允许修改现有的state。相反，它们必须通过复制现有的state并对复制的值进行修改来进行不可变的更新。- redux guide
你可以通过遵循刚刚指定的规则来解决你的问题：

toggleInputScreen: (state, action) => {
  const id = action.payload
  //create and return a new object, which is the new state
  return {
    items: state.items,
    fullScreen: !state.fullScreen,
  }
}

如果状态是一个对象，并且大小不断增加，可以使用Object.assign()方法创建该对象的副本，并轻松更改其值。请查看here和here。对于redux，可以使用以下模式：Object.assign({}, state, changes)。在您的情况下，它将如下所示：

toggleInputScreen: (state, action) => {
  const id = action.payload
  //create and return a new object, which is the new state
  return Object.assign({}, state, { fullscreen: !state.fullscreen }); 
}

赞(0）回复(0）举报 2022-11-12

我来回答

我无法在Redux中切换布尔值

1条答案

相关问题

热门标签

最新问答