Как запустить функцию обратного вызова после mapDispatchToProps ИЛИ обновить реквизиты, используя реагировать на избыточность?

Question

Вот пример этого.

Мой код:

const mapDispatchToProps = dispatch => ({
  onChangeHandler: (name,value) =>
    dispatch({ type: "REGISTRATION", key: name, value })
});

Но мне нужно что-то вроде этого:

const mapDispatchToProps = dispatch => ({
    onChangeHandler: (name,value) =>
    dispatch({ type: "REGISTRATION", key: name, value }).then((nextProps)=>console.log(nextProps))
});

Пожалуйста, помогите нам.

Answer 1

Передача данных Redux из коробки происходит синхронно, поэтому нет смысла «потом» отправлять, поскольку ничего не возвращает. Вы можете прочитать больше об этом здесь:

https://redux.js.org/advanced/async-flow

Я бы порекомендовал посмотреть на redux-thunk, который позволяет вам решить, когда отправлять, будь то син c или asyn c, и позволит вам получить обновленное состояние из магазина. Он делает это, позволяя вам отправлять функцию вместо действия. Функция предоставляет вам dispatch и getState.

Вот пример:

const onChangeHandler = (name, value) => (dispatch, getState) => {
    // Dispatch event
    dispatch({ type: "REGISTRATION", key: name, value });

    // Get updated state
    console.log("state :", getState());
};

export default connect(null, { onChangeHandler })(MyComponent);

Однако, если вы хотите создать побочный эффект обновления магазина из вашего компонента, я бы рекомендовал использовать хук useEffect для это для ответа на обновления в результате обновления состояния хранилища ваших компонентов.

Вот пример:

const MyComponent = ({key, value}) => {
    useEffect(() => {
        console.log(`key or value updated: ${key} ${value}`);
    }, [key, value]);

    return (
        <span>Current props are {key} and {value}</span>
    )
};