redux useSelector：组件对状态更新没有反应

Question

我正在设置一个非常基本的 React TypeScript 和 Redux 应用程序。我使用 useSelector() 来检索状态，然后在我的组件中使用它。然而，当我向商店添加新文章时，ui 没有改变，我检查了 redux 开发工具并且商店已更新，我读到 useSelector 自动订阅商店所以我不确定为什么我'我有这个问题。我的 App 组件代码：

function App() {
  const dispatch: Dispatch<any> = useDispatch();

  const articles: readonly IArticle[] = useSelector(
    (state: ArticleState) => state.articles
  );

  const saveArticle = React.useCallback(
    (article: IArticle) => dispatch(addArticle(article)),
    [dispatch]
  );

  return (
    <div className="App">
      <header className="App-header">
        <h1>My Articles</h1>
        <AddArticle saveArticle={saveArticle} />
        <ul>
          {articles.map((article: IArticle) => (
            <li>{article.title}</li>
          ))}
        </ul>
      </header>
    </div>
  );
}

export default App;

addArticleActionCreator

export function addArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.ADD_ARTICLE,
    article,
  };

  return simulateHttpRequest(action);
}

减速机

const reducer = (
  state: ArticleState = initialState,
  action: ArticleAction
): ArticleState => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newState = {
        ...state,
      };
      const newArticle: IArticle = {
        id: Math.random(), // not really unique
        title: action.article.title,
        body: action.article.body,
      };
      newState.articles.push(newArticle);
      return newState;
    case actionTypes.REMOVE_ARTICLE:
      const newArticles = state.articles.filter(
        (article) => article.id !== action.article.id
      );
      return {
        ...state,
        articles: newArticles,
      };
    default:
      return state;
  }
};

export default reducer;

这是一张屏幕截图，我看到商店中的数据实际上正在更新

Answer 1

行 newState.articles.push(newArticle); 正在改变现有的 articles 数组。然后您的选择器正在尝试读取 state.articles。由于它与以前 相同的引用 ，React-Redux 假设没有任何改变，并且不会重新渲染：

https://react-redux.js.org/api/hooks#equality-comparisons-and-updates

请切换到使用 Redux Toolkit 进行商店设置和缩减器逻辑。它不仅可以让您通过编写这种“变异”逻辑并让它不可变地创建更新来简化您的 reducer，它还有效地使像这样的意外突变成为不可能。

redux useSelector：组件对状态更新没有反应

redux useSelector: component is not reactive to state updates

reactjs

redux

react-redux

react-hooks

减速机