React Redux：我的 React 組件沒有收到更新的數組作為道具

Question

我有 redux 存儲，其中包含作為數組的通知，現在我的問題是我在現有數組中添加新通知的代碼工作正常，即存儲已成功更新，但我的組件使用 mapStateToProps function 作為道具獲取通知，總是收到通知數組的初始 state，所以當添加新通知以存儲我的組件未接收到的通知時，現在當我將通知從數組轉換為字符串然后它獲取更新的值時，任何人都可以幫助找出我做錯了什么？ 以下是我的代碼：

store.js

const initialState={
       //not working when its an arrray 
       notifications:[],//same things work if i assign some string value like 'no notifiation'
  }

function mainReducer(state=initialState,action){
    return {
     notifications:setNotification(state,action)
    }
}



function configureStore(){
    return createStore(
      mainReducer,
      initialState,
      compose(
          applyMiddleware(thunk),
           window.devToolsExtension ? window.devToolsExtension() : f => f
      )
   );
}

 const store=configureStore();
 export default store;

我的減速機

        export function setNotification(state,action){
            let notifications=state.notifications;
            switch(action.type){
                case SET_NOTIFICATION:
                     //this is not working ,means store is updated but component is not
                    notifications.push(action.payload);
                    //same will work if payload is string 
                    //notification=action.payload;//assume payload is string
                    break;
            }
            return notifications;
        }

我的組件

        class Notification extends React.Component{
            constructor(props){
                super(props);
                this.state={}
            }
            render(){
                //this is not working when notification is an array 
                return <h1 style={{marginTop: '170px'}}>this is notification component {this.props.notifications.length}</h1>
                //this is working when notification is string
                //         return <h1 style={{marginTop: '170px'}}>this is notification component {this.props.notifications}</h1>
            }
        } 
        function mapStateToProps(state){
            let notifications=state.notifications
            return {"notifications":notifications};
        }
        function mapDispatchToProps(dispatch){
            return {};
        }
        export default connect(mapStateToProps,mapDispatchToProps)(Notification)

Answer 1

你違反了 redux 原則，當你應該返回一個新的時，你正在變異 state。 你的減速器應該總是返回一個新的下一個 state （或相同的原始）而不是一個突變的。

同樣，當您有一個數組並對其進行推送時，盡管您正在向它添加新值，但它的引用保持不變。 因此很自然地看到相同的初始值，因為 redux 不會對 go 進行深度比較，它的參考是相同的，所以一切看起來都等於 redux。

你的減速器應該更像：

export function setNotification(state, action){
  switch(action.type){
    case SET_NOTIFICATION:
      // using spread is a normal approach but you could use javascript functions to create new objects and arrays
      return { ...state, notifications: [...state.notifications, action.payload] }
    default:
      return state;
  }
}

你的 map state 的道具也可以更清潔 imo。 我不經常看到 state.get() 模式（甚至在docs中也沒有），如果你不使用它，你不需要傳遞mapDispatchToProps ：

    const mapStateToProps = ({ notifications }) => ({ notifications });
    export default connect(mapStateToProps)(Notification)

Answer 2

首先，整個 reducer 應該重寫為：

export function setNotification(state,action){
    switch(action.type){
        case SET_NOTIFICATION:
            return {notifications:[...state.notifications,action.payload]}
        default:
            return state;
    }
}