React中的Redux调用多个调度函数

Question

我有一个index.js，它调用一个操作。一旦它调用了一个操作，我想在该操作中触发多个调度操作。Index.js调用handLoadCustomers，后者将调度loadCustomers函数，该函数调用API并调度另一个函数来存储状态中的客户。

完成后，电话会返回到handleLoadCustomers，我想在那里使用第一个客户调用，然后将handleExtraCustomerLoads的另一个操作分派给那些将调用其他函数/操作。如何在React Redux中做到这一点？

export function handleLoadCustomers() {
return function (dispatch) {
dispatch(loadCustomers())
.then((customers) => {
dispatch(handleExtraCustomerLoads(customers));
})
.catch((error) => {
throw error;
})
.then((newCustomers) => {
dispatch(handlePageLoadSuccess(newCustomers));
});
};

export function loadCustomers() {
return function (dispatch) {
return getCustomers()
.then((customers) => {
dispatch(loadCustomerSuccess(customers));
})
.catch((error) => {
throw error;
});
};
}

loadCustomers为空并且根本不发送handleExtraCustomerLoads功能

Answer 1

您不应该使用操作的返回值，但您可以等待它完成并从状态中选择结果(我认为操作会将您需要的数据写入存储(。

const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = {
customers: [],
extra: [],
};
//api
const getCustomers = () => Promise.resolve([1, 2, 3]);
//action types
const CUSTOMERS_SUCCESS = 'CUSTOMERS_SUCCESS';
const EXTRA = 'EXTRA';
//action creators
const loadCustomerSuccess = (customers) => ({
type: CUSTOMERS_SUCCESS,
payload: customers,
});
const handleExtraCustomerLoads = (extra) => ({
type: EXTRA,
payload: extra,
});
function handleLoadCustomers() {
return function (dispatch, getState) {
dispatch(loadCustomers()).then(() => {
const customers = selectCustomers(getState());
dispatch(handleExtraCustomerLoads(customers));
});
};
}
function loadCustomers() {
return function (dispatch) {
return getCustomers()
.then((customers) => {
//you need to return the value here
return dispatch(loadCustomerSuccess(customers));
})
.catch((error) => {
throw error;
});
};
}
const reducer = (state, { type, payload }) => {
if (type === CUSTOMERS_SUCCESS) {
return { ...state, customers: payload };
}
if (type === EXTRA) {
return { ...state, extra: payload };
}
return state;
};
//selectors
const selectCustomers = (state) => state.customers;
const selectExtra = (state) => state.extra;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware((store) => (next) => (action) =>
//diy thunk
typeof action === 'function'
? action(store.dispatch, store.getState)
: next(action)
)
)
);
const App = () => {
const dispatch = useDispatch();
const customers = useSelector(selectCustomers);
const extra = useSelector(selectExtra);
return (
<div>
<button
onClick={() => dispatch(handleLoadCustomers())}
>
load customers
</button>
<pre>
{JSON.stringify({ customers, extra }, undefined, 2)}
</pre>
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>