Question

我有一个简单的部分，点击后我想更改 redux 状态

这是我的解决方案，demo.js

import React from "react";
import { useDispatch } from "react-redux";

import actions from "store/actions";
function Demo() {
  const dispatch = useDispatch();
  const handleCampaigns = () => {
    dispatch(actions.sliderActions.setIndex(1)); // open a slider containing slider component
  };
  return (
    <div>
      <button
        className="sample"
        onClick={() => {
          dispatch(actions.sliderActions.setName("campaigns_card")); // change the sate of cardName
          handleCampaigns();
        }}
      >
        Change redux state
      </button>
    </div>
  );
}

export default Demo;

这是包含滑块的滑块组件

import React, { useState } from "react";
import { useSelector} from "react-redux";

function Slider() {
  const defaultName = useSelector((state) => state.sliderReducer.name);
  const [cardName, setCardName] = useState(defaultName);
  console.log("card name", cardName);

  return (
    <>
          <div>Card Name: {cardName}</div>
    </>
  );
}

export default Slider;

这里是减速器操作

const setName = items => {
    return {
        type: "SET_NAME",
        payload: items
    }
}
const exports = {
    setName
}

export default exports

这里是reducer

const initialState = {
  name: "social_card"
};
const sliderReducer = (state = initialState, action) => {
  switch (action.type) {

    case "SET_NAME":
      return {...state, name: action.payload };
    default:
      return state;
  }
};

export default sliderReducer;

现在，当我单击按钮更改控制台中的 redux 状态时，它会显示默认状态 card name... social_card

这里出了什么问题？

Answer 1

这不是状态：

function Slider() {
  const cardName = useSelector((state) => state.sliderReducer.name);

  // remove the below line
  // const [cardName, setCardName] = useState(defaultName); 
  console.log("card name", cardName);

  return (
    <>
          <div>Card Name: {cardName}</div>
    </>
  );
}

状态是你的组件拥有的一些数据。您要查找的数据属于 redux，而不是您的组件，因此它不是状态。

当您的 Slider 组件第一次从存储中获取数据时，它会将其设置为状态。每当名称更新时，您的组件都会重新渲染，但会以相同的状态重新渲染。

解决方案：不要使用状态。

Answer 2

问题在于你 const [cardName, setCardName] = useState(defaultName); 线。 cardName 将在初始化时设置为 defaultName 并且永远不会改变，因为 useState 就是这样工作的。

通常，根本没有理由使用该行。就做

const cardName = useSelector((state) => state.sliderReducer.name);

用 redux 反应钩子，状态不更新

2 个答案: