React Redux(不)从mysql数据库更新数组的状态



这是我的第一个react项目,也是第一个JS项目,所以我对这门语言非常陌生,尽管我之前有一些c#的经验。

我让我的应用程序在本地工作的版本,但我的状态和道具传递失控,所以我想在它变得更糟之前实现redux。我有一个getClients Axios函数,它似乎可以处理本地状态,但它的设置方式对redux不起作用。我设置了控制台日志和调试器,看起来减速器正在看到操作。有效载荷很好,应该正在更新状态。但是我的clientList变量与useSelector总是显示一个空数组。

export default function ClientDisplay() {
// const [clients, setClients] = useState([]);
const clientList = useSelector((state) => state.clientList);
const dispatch = useDispatch(); 

useEffect(() => {
getClients();
console.log("initial load");
}, []);

const getClients = () => {
Axios.get("http://localhost:3001/table/clients").then((response) => {
console.log("getClients trigered")   
dispatch(setClientList(response.data));
});
};

import { createSlice } from "@reduxjs/toolkit"

export const clientListSlice = createSlice({
name: 'ClientList',
initialState: [],
reducers: {
setClientList(state, action) {
state = action.payload;
},
},
});
export const {setClientList} = clientListSlice.actions
export default clientListSlice.reducer;

const store = configureStore({
reducer : {
activeClient: activeClientReducer,
clientList: clientListReducer,       
},
})
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);

尝试正确定义initialState。

export const clientListSlice = createSlice({
name: 'clientList',
initialState: {clients:[]},
reducers: {
setClientList(state, action) {
state.clients = action.payload;
},
},
})

,然后在useSelector

const {clients} = useSelector((state) => state.clientList);

最新更新