Почему функция, используемая в mergeProps, не обновляется при обновлении магазина редуксов / состояний?

Question

У меня есть состояние nextBoxID в хранилище с избыточностью и действие + редуктор, который обновляет boxID при нажатии кнопки.

Проблема, с которой я столкнулся, заключается в том, что магазин обновляется, как и ожидалось, при нажатии кнопки, но функция, которая использует nextBoxID из состояния, не обновляется.

const getNewBoxDispatch = (dispatch) => {

    /*
       Inner function used as onPress in a Button. 
       State is updated to the next ID, but the nextBoxID parameter doesn't update.
    */
    const newBoxDispatch = (nextBoxID) => () => {

        dispatch(addNewBox(nextBoxID))
        dispatch(updateToNextID());

        console.log('In newBoxDispatch: \n')
        console.log('nextBoxID - ' + nextBoxID + ' (Initial boxID is 0)')
    };

    return newBoxDispatch;
}


const mapStateToProps = (state) => ({
    newBoxID: state.nextBoxID,
})

const mapDispatchToProps = (dispatch) => ({
    addNewBoxDispatch: getNewBoxDispatch(dispatch)
})

const mergeProps = (stateProps, dispatchProps, ownProps) => {

    const newBoxID = stateProps.newBoxID;

    console.log('In mergeProps: \n')
    console.log('newBoxID - ' + newBoxID)

    const addNewExperiment = dispatchProps.addNewBoxDispatch(newBoxID);

    return({
        ...stateProps,
        ...dispatchProps,
        ...ownProps,
        addNewExperiment
    })
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
)(Home)

При нажатии кнопки хранилище обновляется с newBoxID , но параметр nextBoxID newBoxDispatch не обновляется.

Так, например, мы можем получить вывод:

In mergeProps:
newBoxID - 4

In newBoxDispatch:
nextBoxID - 0 (Initial boxID is 0)

Что происходит?

Answer 1

Очень мало раз вам действительно нужно использовать mergeProps. Кроме того, ваш текущий код кажется очень странным.

Гораздо проще, если вы пишете логику как thunk, и либо передаете ID в качестве параметра, когда ваш компонент вызывает его, либо читаете значение из хранилища в самом thunk. Примеры:

function addNewBoxFromParam(nextBoxID) {
    return (dispatch, getState) => {
        dispatch(addNewBox(nextBoxID))
        dispatch(updateToNextID());
    }
}

function addNewBoxFromState() {
    return (dispatch, getState) => {
        const {nextBoxID} = getState();
        dispatch(addNewBox(nextBoxID))
        dispatch(updateToNextID());
    }
}

const mapState = (state) => ({
    newBoxID: state.nextBoxID,
})


const actionCreators = {
    addNewBoxFromParam,
    addNewBoxFromState,
};

class MyComponent extends React.Component {
    onAddFromParamClicked = () => {
        this.props.addNewBoxFromParam(this.props.newBoxID);
    }

    render() {
        return (
            <div>
                <button onClick={this.onAddFromParamClicked}>Add From Param</button>
                <button onClick={this.props.addNewBoxFromState}>Add From State</button>
            </div>
        );
    }
}

export default connect(mapState, actionCreators)(MyComponent);