如何在向后端服务器发出请求时有效地使用redux

Question

我是使用react的新手，也是redux的新手，我正在做一个使用Django作为后端和react作为前端的项目。我想使用redux进行数据状态管理，但我似乎做得不对。问题是请求正在到达后端，而且我在处理axios返回的承诺时遇到了问题。

这是我的action transaction.js函数：

import axios from "axios";
export const CREATE_TRANSACTION = "CREATE_TRANSACTION";
export const VIEW_TRANSACTION = "VIEW_TRANSACTION";
export const UPDATE_TRANSACTION = "UPDATE_TRANSACTION";
export const LIST_TRANSACTIONS = "LIST_TRANSACTIONS";
export const DELETE_TRANSACTION = "DELETE+TRANSACTION";
export const GET_TRANSACTIONLIST_DATA = "GET_TRANSACTIONLIST_DATA";
const ROOT_URL = "http://127.0.0.1:8000/api/";
export const getTransactionList = () => (dispatch) => {
axios
.get(`${ROOT_URL}transactions/`, {
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
dispatch({ type: LIST_TRANSACTIONS, payload: response.data });
console.log(response.data);
});
};

这是我的reducer transactions.js函数：

import { LIST_TRANSACTIONS } from "../actions/transaction";
export function TransactionReducer(state = {}, action) {
switch (action.type) {
case LIST_TRANSACTIONS:
return action.payload;
default:
return state;
}
} 

我的商店.js:

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ latency: 0 })
: compose;
const store = createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(thunk))
);
export default store;

尝试使用useSelector((显示数据

import React, { useEffect } from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { useSelector, useDispatch } from "react-redux";
import { getTransactionList } from "../../actions/transaction";
export default function TransactionList() {
const dispatch = useDispatch();
const data = useSelector((state) => state.transactions);
console.log(data);
useEffect(() => {
dispatch(getTransactionList());
}, [dispatch]);
return (
<TableContainer component={Paper} sx={{ boxShadow: "none" }}>

最后我的index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
{" "}
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);

reportWebVitals();

请提供任何帮助，我们将不胜感激，提醒我是使用这些技术的新手。可以提供所需的任何进一步信息。

Answer 1

我看到了一个或多或少正确的设置。我认为唯一缺少的部分是当你这样做时：

const store = createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(thunk))
);

你的rootReducer在哪里？我的意思是，我错过了你的root reducer代码，比如

import { combineReducers } from 'redux';
import { TransactionReducer } from 'your/path/TransactionReducer';
import { fooReducer } from 'your/path/fooReducer';
import { barReducer } from 'your/path/barReducer';
export const rootReducer = combineReducers({
transactions: TransactionReducer,
foo: fooReducer,
bar: barReducer,
});

不是吗？