React redux 创建一个从应用程序其他部分获取状态的操作

Question

我有一个 react/redux 应用程序并使用 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};

单击按钮时发送到后端的数据存储在 redux 中：

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

并且未在 MyModal 中呈现。

一个选项是我可以通过MyModalContainer将state.cartData发送到MyModal，然后按钮将它发送到orderButtonHandler。但是 MyModal 会在 state.cartData 发生任何变化时重新绘制，即使它没有从 state.cartData.

绘制任何东西

Answer 1

我找到了令我满意的解决方案，但如果您有更好的解决方案，请post，或在此答案下方发表评论。

// 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});
};

React redux 创建一个从应用程序其他部分获取状态的操作

React redux create an action that takes the state from other part of application

reactjs

redux

redux-thunk