Как отрисовать новые данные запроса, по очереди в React/Redux Toolkit?
На данный момент у меня данные перетираются новыми. Либо выдает два одинаковых поля.
Мой slice:
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { API_URL } from '../../Utils/constant';
import axios from "../../Services/apiService";
export const createShortLink = createAsyncThunk(
'links/createShortLink',
async (link) => {
const response = await axios.post(API_URL + `squeeze?link=${link}`)
.then((response) => response.data)
.catch((error) => {
console.log(error)
})
return await response
}
);
const initialState = {
items: [],
loading: false,
};
const linkSlice = createSlice({
name: 'links',
initialState,
extraReducers: {
[createShortLink.pending]: (state) => {
state.loading = 'loading';
},
[createShortLink.fulfilled]: (state, action) => {
const result = Object.values(action.payload);
console.log('result', result);
const chunkArray = (arr, cnt) => (
arr.reduce((prev, cur, i, a) => !(i % cnt) ? prev.concat([a.slice(i, i + cnt)]) : prev, [])
);
const newResult = (chunkArray(result, 4));
let Array = state.items = [...newResult]; // Двумерный массив items: [[]];
// Найти способ добавлять новые данные с запроса в массив items
console.log('Array', Array);
},
[createShortLink.rejected]: (state) => {
state.loading = 'rejected';
},
}
});
export const selectLinks = state => state.links.items;
export default linkSlice.reducer;
Таблица:
const Table = () => {
const links = useSelector(selectLinks);
return (
<div className="container w-[80%] mt-5">
{links?.map((item, index) => (
<div key={index}>
<table className="min-w-full divide-y divide-slate-500">
<tbody className="divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
{item[0]}
</td>
<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
{item[3]}
</td>
<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
{item[1]}
</td>
<td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">
{item[2]}
</td>
<td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a className="text-red-500 hover:text-red-700" href="/#" >
Copy
</a>
</td>
</tr>
</tbody>
</table>
</div>
))}
</div>
)
};
Ответы (1 шт):
Автор решения: Ridgal
→ Ссылка
Решение было довольно простым:
const linkSlice = createSlice({
name: 'links',
initialState,
extraReducers: {
[createShortLink.pending]: (state) => {
state.loading = 'loading';
},
[createShortLink.fulfilled]: (state, action) => {
const result = Object.values(action.payload);
state.items = [...state.items, result]
console.log('Array', Array);
},
[createShortLink.rejected]: (state) => {
state.loading = 'rejected';
},
}
});