سلام وقت بخیر
درباره پست کردن اطلاعات به api با axios و redux-toolkit توضیح بدید
اینکه باید عملیات axios.post هم در ریداکس تولکیت نوشته بشه ؟؟ و چطور بنویسم اینطور کد رو
سلام روند ارسال دیتا فرقی نداره با axios. میای داخل component که میخوای دیتا رو post کنی مثل قبل درخواست میزنی به server و دیتا رو میگیری. اینجا میتونی یک سرویس بسازی و درخواستاتو اونجا قرار بدی و فقط داخل اون component تابع اون service رو صدا بزنی. حالا اینجا یک فرقی که داره چون با redux toolkit هست باید action خودتو از reducer slice ها بگیری و اونجا استفاده کنی و دیتا رو بفرستی داخل reducer و state هاتو آپدیت کنی. همین.
امیدوارم کد زیر هم یک مثال ساده برای اضافه کردن یک کاربر هست، امیدوارم کمکت کنه.
موفق باشی
// component file
const createUserHandler = async (e) => {
e.preventDefault();
if (user) {
try {
let newUser = await addUserFromService(user);
dispatch(addUser(newUser));
setUser({
name: '',
});
} catch (error) {
console.log(error);
}
}
// slice file
import {createSlice} from '@reduxjs/toolkit'
let initialState = {
list: \[\]
}
export const usersSlice = createSlice({
name: 'users',
initialState,
reducers: {
addUser: (state, {payload}) => {
state.list.push(payload);
},
},
})
// service file
import axios from 'axios';
export const addUserFromService = async (user) => {
let res = await usersService.post('<https://yourapi.com/users>', user);
return res.data.data;
}
export default usersService;
سلام
اگه با react-query آشنا نشدی حتما برو یه نگاه بهش بنداز. فکر کنم از redux بی نیازت کنه. اگر چه که کاراییشون کمی متفاوت و بستگی به پروژه داره ولی معمولا تو 90 درصد پروژه ها شاید هم بیشتر همین react-query کارتو راه میندازه
واسه redux tolkit هم این کد رو ببین
سلام روند ارسال دیتا فرقی نداره با axios. میای داخل component که میخوای دیتا رو post کنی مثل قبل درخواست میزنی به server و دیتا رو میگیری. اینجا میتونی یک سرویس بسازی و درخواستاتو اونجا قرار بدی و فقط داخل اون component تابع اون service رو صدا بزنی. حالا اینجا یک فرقی که داره چون با redux toolkit هست باید action خودتو از reducer slice ها بگیری و اونجا استفاده کنی و دیتا رو بفرستی داخل reducer و state هاتو آپدیت کنی. همین.
امیدوارم کد زیر هم یک مثال ساده برای اضافه کردن یک کاربر هست، امیدوارم کمکت کنه.
موفق باشی
// component file
const createUserHandler = async (e) => {
e.preventDefault();
if (user) {
try {
let newUser = await addUserFromService(user);
dispatch(addUser(newUser));
setUser({
name: '',
});
} catch (error) {
console.log(error);
}
}
// slice file
import {createSlice} from '@reduxjs/toolkit'
let initialState = {
list: \[\]
}
export const usersSlice = createSlice({
name: 'users',
initialState,
reducers: {
addUser: (state, {payload}) => {
state.list.push(payload);
},
},
})
// service file
import axios from 'axios';
export const addUserFromService = async (user) => {
let res = await usersService.post('<https://yourapi.com/users>', user);
return res.data.data;
}
export default usersService;
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟