当 redux state 更改时，React 组件不会更新

Question

我有一个 React 组件，它将 state 映射到道具以通过 redux 获取数据。一切正常，动作和值在 reducer 中正确更新。 我唯一的问题是，当 state 值发生变化时，我希望我的组件重新呈现，以便它始终显示 reducer 中的最新值。 截至目前，我必须调用一个单独的 function 来刷新组件，但我宁愿让它在每次 reducer 中的值发生变化时自动重新渲染。

行动：

export const createPickup = (selected, pickups) => dispatch => {
  let icon;
  icon = check(selected);
  pickups.icon = icon;
  return API('/createPickUp/', {
    ...pickups,
  })
    .then(res => {
      dispatch({type: types.CREATE_PICKUP, res});
    })
    .catch(err => console.log(err));
};

减速器：

const initialState = {
  pick: [],
};
export default function pickup(state = initialState, action) {
  switch (action.type) {
    case types.GET_PICK:
      return {
        pick: action.pickup,
      };
    case types.CREATE_PICKUP:
      return {
        pick: [action.res, ...state.pick],
      };
    case types.DEL_GAME:
      return {
        pick: state.pick.filter(p => p._id !== action.id),
      };
    case types.START_GAME:
      return {
        pick: state.pick.map(p =>
          p._id === action.id ? {...p, start: true} : p,
        ),
      };
    case types.STOP_GAME:
      return {
        pick: state.pick.map(p =>
          p._id === action.id ? {...p, stop: true} : p,
        ),
      };
    default:
      return state;
  }
}

Answer 1

在功能组件中使用 useSelector 挂钩，因为它会自动订阅 state，您的组件将重新呈现。 如果您使用的是 Class 组件，则使用 redux 中的 connect() 和 mapStateinProps。

Answer 2

我假设您已将 reducer 传递给全局商店。 现在......确保你的组件中有最新的值......尝试像这样安慰它......

import {useSelector} from 'react-redux';
const YourCmponent = () => {
 
 const reduxState = useSelector(state => state);
 console.log(reduxState); 

 return <div>Your Content</div>

}

这样您就可以访问 redux 商店。 而且您不需要为更新组件制作任何其他 function您将始终在此处获得更新的值。