如何在 Redux 中使用单个订阅者访问来自化简器的多个返回

Question

我是 Redux 的新手，我很难理解如何获得化简器处理的函数调用的响应。

我正在对由PurchaseOrderReducer.js文件处理的 API 调用的响应进行dispatch({ type: CREATE_PURCHASE_ORDER, payload: response.data.data });。

但是，我无法从化简器文件返回PurchaseOrderReducer.js到我调用await this.props.createPurchaseOrder(user, newPurchaseOrder)的ManageShipment.js文件。

我了解来自index.js -> PurchaseOrderReducer.js的流程，但我不清楚来自PurchaseOrderReducer.js -> ManageShipment.js的流程.

所以我正在使用mapStateToProps并在ManageShipment.js文件中设置purchaseOrders:state.purchaseOrder，当我只GET_PURCHASE_ORDERS时，当我做this.props.purchaseOrders时，它让我从GET_PURCHASE_ORDERS从PurchaseOrderReducer.js返回。

但是现在我也添加了CREATE_PURCHASE_ORDER，那么当我this.props.purchaseOrders时如何区分它将是从GET_PURCHASE_ORDERS返回或从PurchaseOrderReducer.js -> ManageShipment.js文件中返回CREATE_PURCHASE_ORDER？

这是"索引.js"文件代码：

export const getPurchaseOrders = (user) => async dispatch => {
try {
const options = HEADER_OPTIONS_AUTH(user.token);
const response = await axios.get(`${BASE_URL}/purchase_order`, options);
if (response.status === 200) {
const purchaseOrders = response.data.data;
dispatch({ type: GET_PURCHASE_ORDERS, payload: purchaseOrders });
}
}
catch (e) {
dispatch({ type: GET_PURCHASE_ORDERS, payload: [] });
}
};
export const createPurchaseOrder = (user, data) => async dispatch => {
try {
const options = HEADER_OPTIONS_AUTH(user.token);
const response = await axios.post(`${BASE_URL}/insertNewPurchaseOrder`, data, options);
if (response.status === 201) {
dispatch({ type: CREATE_PURCHASE_ORDER, payload: response.data.data });
}
}
catch (e) {
dispatch({ type: CREATE_PURCHASE_ORDER, payload: [] });
}
};

以下是purchaseOrderReducer.js文件代码：

import { GET_PURCHASE_ORDERS,CREATE_PURCHASE_ORDER} from '../actions/types';
export default function (state = false, action) {
switch (action.type) {
case GET_PURCHASE_ORDERS:
return action.payload;
case CREATE_PURCHASE_ORDER:
return [...state, ...action.payload]

default:
return state;
}
}

在我正在做的减速器的index.js文件中：

import purchaseOrderReducer from './purchaseOrderReducer'
export default combineReducers({
purchaseOrder: purchaseOrderReducer,
});

在ManageShipment.js文件代码中：

class ManageShipment extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.getPurchaseOrders(user);
}
render(){
const purchaseOrders = this.props.purchaseOrders;
const creatPurchaseOrder = async(user,newPurchaseOrder) =>{
await this.props.createPurchaseOrder(user, newPurchaseOrder); // How can I get the response of this post api here?
}

}
}
const mapStateToProps = state => {
return {
purchaseOrders: state.purchaseOrder,
};
};
export default connect(mapStateToProps, actions)(ManageShipment);

Answer 1

好吧，我不确定你到底在做什么，尤其是在你的减速器中。 但请记住，您使用的是 Redux。在createPurchaseOrder()函数中，你调用purchaseOrderReducer.js reducer，它将用API的响应为你填充purchaseOrder。如果您正确使用组合Reducers并创建一个商店.js，则可以在ManageShipping中使用react-redux方法(如连接)轻松访问ManageShipping.js中的purchaseOrder。如果你想要响应，你可以使用你通过mapStateToProps创建的对象。您可以设置加载状态，并在异步方法完成后将其设置为 false，之后，您的 purchaseOrder 将填充您需要的响应数据。

据我所知，在 index.js 文件中，您应该导出 store，而不是组合Reducers。 如下所示：

const rootReducer = combineReducers({
purchaseOrder: purchaseOrderReducer,
});
const store = createStore(rootReducer)
store.subscribe(() => {
console.log(store.getState())
})
export default store

然后在 React 应用程序的索引.js中，您应该将所有应用程序包装在从 react-redux 包导入的提供程序组件中。 之后，您可以使用连接或使用选择器访问您想要的购买订单。 像这样：

React index.js 应该看起来像这样：

import {Provider} from "react-redux"
import store from "./redux" //from index.js in your redux files
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, 
document.getElementById("root")
)

希望这个答案以某种方式帮助你。

Answer 2

如果你阅读更多关于 Redux 最佳实践的信息，你会发现你从错误的角度接近了这一点。

调度函数调度导致存储更改的操作。它不应该返回任何内容。你很难弄清楚如何做到这一点，因为你正在尝试做一些 redux 不设计要做的事情。

与其await-ing 从调度中返回值，不如使用选择器从存储中选择所需的信息。 通过使用mapStateToProps(或useSelector钩子，因为钩子是当今的首选方法)，选择器将在调度将新值放入存储区后立即更新。

至于检测哪个订单是新订单，您可以做几件事。 每个采购订单是否有唯一的 ID？ ID 是否是您在调度操作时知道的内容？ 如果是这种情况，那将是最简单的。 您将从状态中选择所有purchaseOrders，然后查找与您发布的 id 匹配

的那个。您真的需要知道哪个采购订单是新的吗？还是它们都以相同的方式呈现？

您绝对不应该从render()函数内部调用调度，这似乎是您现在正在做的事情。 它应该在响应操作(onClick等)或componentDidMount中调用。

以下是它作为函数组件的外观

export const ManageShipment = ({user}) => {
// selects all order from the state.  will update when new orders are added in the state
const orders = useSelector( state => state.purchaseOrder );
// access the dispatch function
const dispatch = useDispatch();
// create a function to call the createPurchaseOrder action
const onClickButton = () => {
dispatch(createPurchaseOrder(user, data)); // where does this data come from?
}
// use effect to fetch orders on component mount
useEffect( () => {
dispatch( getPurchaseOrders( user ) );
}, []) // empty dependency array means this is only fetched once on component mount
// might initially render an empty array of orders, but will get updated with the actual orders
return (
<div>
<h2>Your Orders</h2>
{orders.map((order, i) => (
<PurchaseOrder 
key={order.id}
order={order}
/>
))}
<button onClick={() => onClickButton}>Create New Order</button>
</div>
)
}