Question

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

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')
);

LifePLanner然后调用ExpandedCard组件，将容器放下，然后再次移至ImageCard组件，在该组件中放置一个onClick，这会更改商店

openContainer

这里也有我的减速器：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import {  setContainer } from '../store/plannerSlice'
import store from '../store/store';

const useStyles = makeStyles({
  media: { height: 250 },
});

export default function SectionCard({ id, name, image, description, children }) {
  const classes = useStyles();
  const handleClick = () => {
    fetch(`/lp?${id}`, { 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 , children: data.data.containers }));
      });
    }
    ).catch(function (err) {
      console.log('Fetch Error :-S', err);
    });
  }
  return (
    <Card className={classes.root} onClick={()=>handleClick()}>
      <CardActionArea>
        {image &&
          <CardMedia
            className={classes.media}
            image={image}
            title="Contemplative Reptile"
          />}
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {name}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      {(children && children.length > 0) &&
        <CardActions>
          <Button size="small" color="primary">
            Expand (Contains {children.length} items)
          </Button>
        </CardActions>
      }
    </Card>
  );
}

没有一个组件会触发其组件WillLReceiveProps或收到更改通知，但是商店确实从点击中获得了更改

Answer 1

是的，这里有几个问题。主要问题是：

您正在直接在我们的组件中与商店进行交互。相反，您应该使用the React-Redux APIs like connect and useSelector/useDispatch从存储中读取数据并在组件中调度操作。这样，当商店状态更新时，它们就会正确更新。
您不应该从道具复制数据以声明状态。 Copying data from props to state is almost always the wrong approach。

其他一些注意事项：

从概念上讲，think of actions as "events that happened", not "setters"。与其调用减速器/操作setContainer，不如调用containerDataLoaded。
您无需在减速器中传播{...payload}，因为对象是在分派操作时构造的。您可以将该行简化为state.openContainer = action.payload。
您可能要考虑使用async/await语法而不是应许链接。

更新Redux Store时不重新渲染组件

1 个答案: