React Redux создает действие, которое принимает состояние от другой части приложения - PullRequest
Новая
       8

React Redux создает действие, которое принимает состояние от другой части приложения

0 голосов
/ 11 октября 2018

У меня есть приложение реагирования / избыточности и я использую redux-thunk.

У меня есть кнопка в одной части приложения, которая при нажатии запускает действие, которое принимает состояние какой-то совершенно другой части приложения и отправляетэто бэкэнд.Когда приходит ответ от сервера, он должен изменить состояние приложения.Как я могу это сделать?

Проверьте приведенный ниже пример:

Часть приложения с кнопкой: 

// MyModalContainer.js
import {connect} from 'react-redux';
import {MyModal} from './MyModal';

const mapStateToProps = (state) => ({
});
const mapDispatchToProps = (dispatch) => ({
    orderButtonHandler: () => {...to do...}
});

const MyModalContainer = connect(mapStateToProps, mapDispatchToProps)(MyModal);
export {MyModalContainer};


///////////////////////////////////
// MyModal.js
import React from 'react';
import Button from '@material-ui/core/Button';
class MyModal extends React.Component {
    render() {
        return (
            <div>
                <Something>....</Something>
                <Something2>....</Something2>
                <Button onClick={this.props.orderButtonHandler} color="primary">
                    Order
                </Button>
            </div>
        );
    }
}
export {MyModal};

Данные для отправки в бэкэнд при нажатии кнопкихранится в Redx в: 

state.cartData = {
     data1: ....,
     data2: ....,
     data3: ....
}

и не отображается в MyModal .

Один из вариантов заключается в том, что я могу отправить state.cartData на MyModal через MyModalContainer, а затем кнопка отправит его на orderButtonHandler.Но тогда MyModal будет перерисовываться каждый раз, когда state.cartData изменяется, даже если он ничего не вытягивает из state.cartData.

1 Ответ

0 голосов
/ 13 октября 2018

Я нашел решение, которое меня устраивает, но если у вас есть лучшее решение, пожалуйста, напишите или прокомментируйте ниже этот ответ. 

// MyModalContainer.js
import {connect} from 'react-redux';
import {MyModal} from './MyModal';
import { makeOrder } from './modules/cart';

const mapStateToProps = (state) => ({
});
const mapDispatchToProps = (dispatch) => ({
    orderButtonHandler: () => {dispatch(makeOrder());}
});

const MyModalContainer = connect(mapStateToProps, mapDispatchToProps)(MyModal);
export {MyModalContainer};

Функция makeOrder использует redux-thunk с getState : 

// modules/cart.js
const makeOrders = () => async (dispatch, getState) => {

    const stateOfSomeOtherPartOfApp = getState().cart; 
    // THE CRITICAL PART IS TO GET THE STATE IN THE ASYNC ACTION CREATOR 
    // AS I FOUND OUT THAT getState IS PROVIDED BY REDUX THUNK

    const orderResponse = await makeAsyncPost(stateOfSomeOtherPartOfApp);
    dispatch({type: 'orderResponseReceived', data: orderResponse});
};
...