更新redux狀態不會觸發重新渲染（也不會更新狀態）

Question

我對Redux很陌生，並且遇到了一些問題。

我正在創建組件中的項目列表，將其發送到redux狀態，然后我想從該redux狀態中讀取並在其他列表組件中顯示項目。

創建部分的工作方式就像我可以console.log和getState()沒有問題（我正在查看Redux State中的更改）。

我的問題是我的組件狀態不會更改，也不會重新呈現。

現在一些代碼->

this.state = {
    initialItems: this.props.SharepointItems,
}

最后

const mapStateToProps = (state) => {
    return {
        SharepointItems: state.listItems,
    }
}

export default connect(mapStateToProps)(SharePointList);

我什至在我的componentDidMount() ->中嘗試了類似的方法

    store.subscribe(() => {
        this.setState({ initialItems: this.props.SharepointItems });
        console.log("updating state");
    });

從我已經閱讀的內容中，我不需要在使用redux時手動更新狀態，還是我錯了？

編輯：由於如果我console.log我的列表不會引發錯誤，我可以看到該數組為空（這是我在Redux狀態中定義的）。 我需要做些什么才能獲得新狀態？ 好像它得到了不可變狀態或類似的東西（空數組）。

Edit2：發現了問題（或部分問題）。 似乎我的狀態落后1個事件。 因此，redux包含具有4個項目的數組，組件狀態為空。 如果我從瀏覽器中進行分派，則會在redux中獲得5個項目（如預期），但狀態為4個（最終顯示為非空）。

我的代碼也有點bug（我正在傳遞整個數組而不是數組中的項目）。

我已將其更改為

        result.map((item) => {
            store.dispatch(addListItem(item));
        });

然后開始渲染。 問題在於它顯示的項目從0到2（數組中為4），但是最后一個項目被遺忘了。 再一次，如果我從瀏覽器中進行另一次調度，我將呈現第3項，但第4項（最后添加的第4項）僅處於還原狀態，並且不會更新列表狀態。

另外...這樣做是個好主意嗎？ 我的列表將來可能有1000個項目，我不確定分派是否是一個好的解決方案（我需要先進行API調用才能首先獲得項目，這就是為什么我使用分派來填充redux的原因）。

用reducer更新->

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_LISTITEM:
            return { ...state, listItems: [...state.listItems, action.payload] };
        case ADD_SPOTOKEN:
            return { ...state, spoToken: action.payload };
        default:
            return state;
    }
};

export default rootReducer;

發現其他東西有點奇怪。 我也在使用React Router。 如我所說，我的列表僅顯示Redux State陣列中4個項目中的3個。 如果我導航到其他頁面，然后返回列表頁面，則實際上將呈現所有4個項目。

Answer 1

我相信從你有“分叉”其實你的問題源於SharepointItems關的props ，並將其設置到組件的本地this.state 。 除非您確實需要，否則我建議不要這樣做。 只需使用this.props 。 Dan Abramov（Redux的作者）也建議將此作為一般原則 。

通過將道具分叉到狀態，您可以創建關於SharepointItems狀態的兩個事實來源，即this.state.initialItems和this.props.SharepointItems 。 然后，通過實現componentDidUpdate （這就是為什么您看不到它的更新），使this.state和this.props保持同步成為您的責任。 您可以僅使用從props流入的數據來避免所有額外的工作。

每當您更新redux存儲時， connect函數都會使用新的props重新渲染您的組件。 因此，在render方法中，僅引用this.props.SharepointItems而不是this.state.initialItems 。 然后，您應該會很好，也就是說，假設您已經實現了reducer，並正確存儲了配置。

Answer 2

我實際上是錯誤地解決了這個問題。 我打算將其保留到最后，並找到解決方法，但是我以某種方式修復了它。

我正在頁面（反應路由器）中導入列表組件（具有redux狀態道具）。 該頁面尚未連接，因為尚未准備好。 顯然，在連接頁面（保存列表的父組件）之后，一切正常，我可以看到所有4個項目（而不是在沒有連接父項的情況下看到3個項目）。

我不知道這是否有意...