我的 Redux 状态发生了变化，为什么 React 没有触发重新渲染？

IT技术 reactjs redux react-redux
2021-04-03 08:21:41

我正在尝试设计一个通知组件，其中在某些情况下会出现通知（如连接问题、成功修改等）。

我需要通知在几秒钟后消失，因此我触发了状态更改以从setTimeout通知的componentDidMount.

我可以看到状态确实发生了变化，但是 React-Redux 没有重新渲染父组件，因此通知仍然出现在 DOM 上。

这是我的 Redux 减速器：

const initialState = {
    notifications: []
}

export default function (state = initialState, action) {
  switch(action.type) {
    case CLEAR_SINGLE_NOTIFICATION:
      return Object.assign ({}, state, {
        notifications: deleteSingleNotification(state.notifications, action.payload)
      })
      case CLEAR_ALL_NOTIFICATIONS:
        return Object.assign ({}, state, {
          notifications: []
        })
      default:
        return state
    }
}

function deleteSingleNotification (notifications, notificationId) {
  notifications.some (function (notification, index) {
    return (notifications [index] ['id'] === notificationId) ?
           !!(notifications.splice(index, 1)) :
           false;
  })

  return notifications;
}

和我的 React 组件（Main和Notification）：

/* MAIN.JS */
class Main extends Component {

    renderDeletedVideoNotifications() {
        console.log('rendering notifications');
        const clearNotification = this.props.clearNotification;
        return this.props.notifications.map((notification)=> {
            return <Notification
                key={notification.id}
                message={notification.message}
                style={notification.style}
                clearNotification={clearNotification}
                notificationId={notification.id}
            />
        });
    }

    render() {
        console.log('rerendering');
        return (
            <div className="_main">
                <Navbar location={this.props.location} logStatus={this.props.logStatus}
                        logOut={this.logout.bind(this)}/>
                <div className="_separator"></div>
                {this.props.children}
                <BottomStack>
                    {this.renderDeletedVideoNotifications()}
                </BottomStack>
            </div>
        );
    }

}

function mapStateToProps(state) {
    return {logStatus: state.logStatus, notifications: state.notifications.notifications};
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({checkLogStatus, logOut, clearNotification, clearAllNotifications}, dispatch);
}

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

/* NOTIFICATION.JS */

export default class Notification extends Component{
    constructor(props){
        super(props);
        this.state = {show: true}
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.message){
            this.setState({show: true});
        }
    }

    clearNotification(notificationId){
        this.props.clearNotifications(notificationId);
    }

    componentDidMount(){
        console.log('notification  mount');
        setTimeout(()=>{
            console.log('timed out');
            this.props.clearNotification(this.props.notificationId);
        }, 1000);
    }

    closeNotification(){
        this.props.clearNotification(this.props.notificationId);
        this.setState({show: false});
    }

    render(){
        const notificationStyles = () =>{
            if (this.props.style === "error"){
                return {backgroundColor: 'rgba(152, 5, 19, 0.8)'}
            }
            return {backgroundColor: 'rgba(8, 130, 101, 0.8)'}
        };

        if(!this.state.show){
            return null;
        }
        return (
            <div className="notification" style={notificationStyles()}>
                <div className="notificationCloseButton" onClick={this.closeNotification.bind(this)}>
                    <i className="material-icons">close</i>
                </div>
                {this.props.message}
            </div>
        )
    }

};
1个回答

您已经正确连接了所有内容，但是您缺少 Redux 的一个关键概念：

使用 Redux，你永远不会改变state.

从Redux 指南：

在减速器中你永远不应该做的事情：

  • 改变它的论点；
  • 执行 API 调用和路由转换等副作用；
  • 调用非纯函数，例如 Date.now() 或 Math.random()。

在 中deleteSingleNotification，您正在使用 .splice 将旧通知从数组中删除。相反，您需要返回一个全新的数组，其中缺少不需要的通知。最简单的方法是使用 .filter 函数：

function deleteSingleNotification(notifications, notificationId){
    return notifications.filter (notification => {
        return notification.id !== notificationId
    }
}
这是一个带有您的工作通知系统的 JSBin！

这就是为什么这样做的原因：React-Redux 的工作是在 Redux 存储的特定部分发生更改时更新您的组件。它对===状态树的每个部分进行测试以了解是否有任何更改。

当您使用 .splice 之类的内容更改状态时，它会检查并认为没有什么不同。

这是一个演示问题的示例：

var array = [ 'a', 'b', 'c' ]

var oldArray = array

array.splice (1, 1) // cut out 'b'

oldArray === array // => true!  Both arrays were changed by using .splice,
                   // so React-Redux *doesn't* update anything

相反，React-Redux 需要我们这样做：

var array = [ 'a', 'b', 'c' ]

var oldArray = array

array = array.filter (item, index => index !== 1) // new array without 'b'

oldArray === array // false.  That part of your state has changed, so your
                   // componenet is re-rendered

Redux 出于性能原因使用这种方法。遍历一个大的状态树以查看是否一切都相同需要很长时间。当你保持你的树不可变时，只===需要一个测试，这个过程就会变得容易得多。

我有一个类似的案例。我在哪里使用这个 let newState = state; newState.value = newValue; 在我的情况下，副本是通过引用的，因此我实际上是在改变父语句。为了做一个深拷贝，我做了以下事情，终于解决了我的问题—— let newState = {...state};
2021-06-03 08:21:41
@Nicolas Object.assign () 只做一个浅拷贝。所以状态被复制，但通知数组被改变。
2021-06-12 08:21:41
谢谢，就是这个问题！我意识到避免突变的必要性，但我认为我实现它的方式是一种不可变的方式。使用 Object.assign 不会将新项目返回到状态？对我来说，我不关心过去状态的拼接，因为该函数只是返回一个新状态，尽管发生了变异，但将使用 Object.assign 方法返回一个新状态。我错过了什么吗？
2021-06-20 08:21:41
其它你可能感兴趣的问题
上一篇ReactJS 中的浏览器检测 下一篇无法将任务“包装器”添加为具有该名称的任务已存在