如何允许connect基于状态更改重新渲染对象

Question

在下面的示例中，我希望组件在列表更新时重新渲染。但是即使连接传递了新状态，它也不会重新呈现组件。

我知道connect执行浅层比较，但不知道如何使其比较对象的值。我找不到任何启用选项的连接示例。

我已经了解了redux连接的组件如何知道何时重新渲染？还有一些，但也没用。

我试过了

const ConnectList = connect(mapStateToProps,null,null,{areStatesEqual : () => false})(List)

只是试图让它重新渲染任何变化。这似乎也不起作用。

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import thunk from 'redux-thunk'
import {connect, Provider} from 'react-redux'

function testReducer (state=null,action) {
    console.log(`Reducer: Reducer received action ${action.type}. ${action.comment}`)
    switch(action.type){
        case 'LIST': {
            return ({ ...state, list: action.list })
        }

        case 'OTHER': {
            return ({ ...state, other: action.other })
        }
        default:
            return state
    }

}

function testAction() {
    return {
        type: 'LIST',
        list: ['first','second'],
        comment: `This will trigger both connect() and mount Component List mount because, both reducer and connect changes state after this action`
    }
}

function testActionChange() {
    return {
        type: 'LIST',
        list: ['first','second','third'],
        comment: `This will trigger both connect() and mount Component List mount because, both reducer and connect changes state after this action`
    }
}

function testOther() {
    return {
        type: 'OTHER',
        other: `some other value`,
        comment: `This will trigger connect(), but not mount Component List because the return from connect() doesn't change`
    }
}

function inertAction() {
    return {
        type: 'INERT',
        comment: 'This action should not trigger either connect() or mount Component List , because reducer returs the same state'
    }
}

const store = createStore(testReducer, [thunk])

store.dispatch(testAction())

//Dispatch an action after 2 secs
setTimeout(store.dispatch.bind(null,testOther()),2000)
setTimeout(store.dispatch.bind(null,inertAction()),4000)
setTimeout(store.dispatch.bind(null,testActionChange()),6000)


class List extends Component {

    componentDidMount(){
        console.log(`Component List mounted`)
    }

    render(){
        const {list} = this.props
        return(
            <div>
                {list.map((element) => {
                    return(<Element key={element} element={element} />)
                })}
            </div>
        )
    }
}

function mapStateToProps({list}){
    console.log(`connect() triggered`)
    return( {
        list
    })
}

const ConnectList = connect(mapStateToProps)(List)

class Element extends Component {
    render(){
        const {element} = this.props
        return(
            <div>{element}</div>
        )
    }
}

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

输出

Answer 1

我发现connect实际上调用了组件。但只有渲染方法。因此，我必须将componentDidMount上的action creator调用移动到redux中的中间件，以便在状态更改时添加适当的调度程序。

Answer 2

我不认识您在MapStateTops中使用的语法

尝试：

function mapStateToProps(state){
    console.log(`connect() triggered`)
    const list = state.list;
    return { list };
}