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

【问题标题】：react hooks with redux, state not updating用 redux 反应钩子，状态不更新
【发布时间】：2021-05-26 09:48:58
【问题描述】：

我有一个简单的部分，点击后我想更改 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;

这里是 reducer 操作

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

export default exports

这里是减速器

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

这里有什么问题？

【问题讨论】：

标签： javascript reactjs redux react-redux react-hooks

【解决方案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 组件第一次从存储中获取数据时，它会将其设置为状态。每当名称更新时，您的组件都会重新渲染，但它会以相同的状态重新渲染。

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

【讨论】：

【解决方案2】：

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

一般来说，这条线根本没有理由。做吧

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

【讨论】：