Redux：状态更新后组件未更新[重复]

Question

我创建了减速器并使用它来更改我的商店的状态。但正如您在 App.js 中看到的那样，每当我单击按钮并更新状态时。它更新。我可以在控制台中看到它。但组件不更新。如您所见，我有没有更新的曲目列表。如果我因为组件重新渲染而对代码进行任何更改，我可以看到之后的新状态。为什么状态更新时不自动渲染。

动作

import * as actions from './actionTypes'

export const trackAdded = (title, artist, audioSrc, img) => {
    return {
        type: actions.TRACK_ADDED,
        payload: {
            title,
            artist,
            audioSrc,
            img
        }
    }
}

减速器

import * as actions from './actionTypes'

export default function reducer(state = [], action) {
    switch (action.type) {
        case actions.TRACK_ADDED:
            return [
                ...state,
                {
                    title: action.payload.title,
                    artist: action.payload.artist,
                    audioSrc: action.payload.audioSrc,
                    img: action.payload.img
                }
            ]

        default:
            return state
    }
}

App.js

import './App.css';
import store from './store'
import { trackAdded } from './actions'

function App() {
  const add = (title) => {
    store.dispatch(trackAdded(title, "Taylor Swift", "src", "image"))
    console.log(store.getState())
  }
  
  return (
    <div className="App">
      {store.getState().map((track, track_id) => {
        return (
          <li key={track_id}>{track.title}</li>
        )
      })}
      <button onClick={() => { add("Shake It Off") }}>Add Track</button>

    </div>
  );
}

export default App;

Answer 1

发生这种情况是因为您的组件不知道商店已更新，您可以使用类似的东西

useEffect(() => {
  this.artistList = store.getState();
}, [store.getState()]); // kind of watcher of store.getState()

但这绝对不推荐。您可能想使用 react-redux 中的useSelector()，这是一种非常简洁且推荐的方式。

Answer 2

组件不会更新，因为<div className="App"> 内部的store.getState() 只会在调用组件时运行一次。不存在告诉组件重新运行store.getState() 的逻辑。如果希望组件在 store 的状态发生变化时接收更新，则需要使用 react-redux 的 connect 函数或 useSelector 钩子将其连接到 store。

例如，如果使用connect 函数，您可以将redux 状态映射到react 组件的props。因此，如果组件的 props 发生变化，那么组件将对它的 props 变化做出“反应”。 redux 的 state 到组件 props 的映射发生在 mapStateToProps 函数中，返回一个映射到组件的 prop tracks。否则，组件没有理由更新。另请注意：在下面的示例中，商店通过Provider 组件连接到 React，将商店提供给希望连接到它的子组件。

import { Provider, connect } from 'react-redux'

import './App.css';
import store from './store'
import { trackAdded } from './actions'

function App(props) {
  const add = (title) => {
    store.dispatch(trackAdded(title, "Taylor Swift", "src", "image"))
    console.log(store.getState())
  }
  
  return (
    <Provider store={store}>
      <div className="App">
        {props.tracks.map((track, track_id) => {
          return (
            <li key={track_id}>{track.title}</li>
          )
        })}
        <button onClick={() => { add("Shake It Off") }}>Add Track</button>
      </div>
    </Provider>
  );
}

const mapStateToProps = (state) => {
  const tracks = state
  return { tracks }
}

export default connect(mapStateToProps)(App);

话虽如此，如果你走connect 路线，你可能想向connect 添加一个mapDispatchToProps 函数，这样你就不会到处绕过store。您可以在 redux 文档中找到该信息，但这将是另一个问题的答案。