React 组件在 Redux 存储更新后不会重新渲染

Question

我有一个 React 问题。我的组件 NavBar 在使用表单更新存储后不会重新呈现点值。我想重新渲染组件，以便它可以使用 useSelector 挂钩获取新的点值，然后将其显示在页面上的按钮中。

这是我的 Redux initialState 代码：

const initialState = {
  points: '3100',
  rewards: [
    {...}              
  ],
};

我的积分Redux文件：

// selectors
export const getAllPoints = state => state.points;
// actions
const createActionName = actionName => `app/points/${actionName}`;
const UPDATE_POINTS = createActionName('UPDATE_POINTS');
// action creators
export const updatePoints = payload => ({ type: UPDATE_POINTS, payload });
// subreducer
const pointsReducer = (statePart = [], action) => {
  switch (action.type) {
    case UPDATE_POINTS:
      console.log('redux', action.payload);
      return action.payload;
    default:
      return statePart;
  };
};

export default pointsReducer;

我的表单组件（没有导入）：

// other imports
import { getAllPoints, updatePoints } from '../../../redux/pointsRedux';

const AddPointsWidget = () => {

  const currentPoints = useSelector(getAllPoints);
  const [newPoints, setNewPoints] = useState(currentPoints);
  const dispatch = useDispatch();

  const handleSubmit = e => {
    e.preventDefault();
    dispatch(updatePoints(newPoints));
  };

  return (
    <form className={ styles.AddPointsWidget } onSubmit={ handleSubmit }>
      <> ... </>    
      <SubmitButton>
        { 'Zmień punkty' }
      </SubmitButton>
    </form>
  );
};

提交表单后不重新渲染的 NavBar 组件：

import { getAllPoints } from '../../../redux/pointsRedux';

const NavBar = () => {
  const points = useSelector(getAllPoints);

  return (
    <nav className={ styles.NavBar } >
      <> ... </>
      <PointsButton location={ 'NavBar' } amount={ points } clickFunction={ openPopUp } />
      <> ... </>
    </nav>
  );
};

我想在提交给输入值的表单后强制重新渲染带有点值的导航栏显示在按钮中而不重新加载页面。 我尝试了 useEffect hook 和 useNavigate from Router 但无法解决这个问题。 你们知道我怎样才能让它正常工作吗？

GitHub 上的回购如下： https://github.com/jerzy-jarczynski/react-rewards-app

我尝试在 Redux useSelector 的 currentPoints 更改后使用 useEffect 刷新 NavBar 组件中的点。我也尝试在提交表单后使用 Navigate 切换到“/”。

我希望在按钮内的 NavBar 组件中看到更新的点值，而无需重新加载页面。

Answer 1

您可以更改

pointsReducer

以仅更新状态中的

points

字段，而不是用有效负载替换整个状态。

const pointsReducer = (statePart = initialState, action) => {
  switch (action.type) {
    case UPDATE_POINTS:
      console.log('redux', action.payload);
      return {
        ...statePart,
        points: action.payload
      };
    default:
      return statePart;
  };
};