Reactjs 更新redux存储时，组件不会重新加载

我有一个连接的顶级组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import store from './store/store';
import { Provider } from 'react-redux';
import LifePlanner from './lifePlanner';
import { getContainer, setContainer } from './store/plannerSlice'

class App extends React.Component {

  componentDidMount() {
    fetch("/lp/top-layer", { mode: 'cors' }).then((response) => {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }
      response.json().then((data) => {
        store.dispatch(setContainer({ name: "Root Container", children: data.data.containers }));
        this.setState({ container: getContainer(store.getState()) })
      });
    }
    ).catch(function (err) {
      console.log('Fetch Error :-S', err);
    });
  }


  render() {
    let c = this.state.container;
    if (c.name) {
      return <LifePlanner container={c} />
    }
    return <h1>Loading</h1>;
  }
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
);

这也是我的减速机：

import { createSlice } from '@reduxjs/toolkit';

export const slice = createSlice({
  name: 'containers',
  initialState: {
    openContainer: {}
  },  
  reducers: {
    setContainer: (state, action) => {
      let payload = action.payload;
      state.openContainer  = {...payload}
    },
  },
});

export const getContainer = state => {
  return state.containers.openContainer
};

export const { setContainer } = slice.actions;

export default slice.reducer;

---

没有一个组件获得他们的组件将收到触发的Props或更改通知，但是商店确实从单击中获得更改。是的，这里有几个问题。主要问题是：

• 您直接在我们的组件中与商店进行交互。相反，您应该使用从存储中读取数据，并在组件中分派操作。这样，当存储状态更新时，它们将正确更新
• 您不应该只是为了渲染而将数据从道具复制到状态

其他一些注意事项：

• 在概念上。与其调用reducer/action

  setContainer

  ，不如将其称为

  containerataloaded

• 您不需要在该缩减器中扩展

  {…payload}

  ，因为对象是在您调度操作时构造的。您可以将该行简化为

  state.openContainer=action.payload

您可能需要考虑使用<代码>异步/等待> /COM>语法，而不是承诺链接。

import { createSlice } from '@reduxjs/toolkit';

export const slice = createSlice({
  name: 'containers',
  initialState: {
    openContainer: {}
  },  
  reducers: {
    setContainer: (state, action) => {
      let payload = action.payload;
      state.openContainer  = {...payload}
    },
  },
});

export const getContainer = state => {
  return state.containers.openContainer
};

export const { setContainer } = slice.actions;

export default slice.reducer;