反应 Redux 不更新

在使用 React 和 Redux 时，您可能会遇到反应 Redux 不更新的问题。这种情况可能会让您感到困惑和沮丧，因为您的应用程序不会像预期的那样工作。但是，有几个常见的原因可以导致这种情况，我们可以通过检查这些原因来解决这个问题。

原因

1. mapStateToProps 返回了相同的对象

如果您的 mapStateToProps 函数返回的对象在每个调用之间都相同，则 React 不会重新渲染组件。这意味着如果您更改 Redux 存储中的状态，但 mapStateToProps 返回的对象与上次渲染时相同，则您的组件将不被更新。

const mapStateToProps = state => ({
  todos: state.todos, // 如果 state.todos 没有更改，则组件不会更新
});

要解决这个问题，您可以在 mapStateToProps 函数内使用转换函数或选择器，它们将返回一个新的对象，从而在组件中引发重新呈现。

import { createSelector } from 'reselect';

const todosSelector = state => state.todos;

const mapStateToProps = createSelector(
  todosSelector,
  todos => ({ todos }),
);

2. 组件未正确连接到 Redux

反应 Redux 只能更新受 Redux 存储更改影响的组件。如果您的组件未正确连接到 Redux 存储，则 React 将无法感知更改并相应地重新渲染组件。

您需要确保使用 connect 函数将组件连接到 Redux 存储。使用这个函数，你可以定义 mapStateToProps 和 mapDispatchToProps 函数，它们会将 Redux 存储传递给组件。

import { connect } from 'react-redux';

const mapStateToProps = state => ({ todos: state.todos });
const mapDispatchToProps = { addTodo };

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TodoList);

3. 组件未正确订阅 Redux 存储更改

使用 connect 函数将组件连接到 Redux 存储之后，您还需要确保它订阅了 Redux 存储的更改。为此，您可以使用 store.subscribe 函数，在每次存储更改时执行回调。

import { store } from './store';

class App extends React.Component {
  componentDidMount() {
    store.subscribe(() => {
      this.forceUpdate(); // 强制组件重新渲染
    });
  }

  render() {
    // ...
  }
}

注意，强制组件重新渲染可能会导致性能问题，因此请谨慎使用它。

结论

通过检查上述问题，您应该能够找出为什么反应 Redux 不会更新，并解决这个问题。无论如何，这些问题都提供了一个很好的机会来学习如何更好地使用 React 和 Redux。