مقدمه ای برای Redux – جامعه dev

import { configureStore } from '@reduxjs/toolkit';

import cartReducer from './cartSlice';



const store = configureStore({

  reducer: {

    cart: cartReducer,

  },

});

export default store;

const addItem = (item) => ({
  type: 'ADD_ITEM',
  payload: item,
});

import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({

  name: 'cart',

  initialState: {

    cartProductIds: [],

  },

  reducers: {

    addToCart: (state, action) => {

      state.cartProductIds = [action.payload, ...state.cartProductIds];

    },

    removeFromCart: (state, action) => {

      const indexOfId = state.cartProductIds.indexOf(action.payload);

      if (indexOfId !== -1) {

        state.cartProductIds.splice(indexOfId, 1);

      }

    },

    clearAllItems: (state) => {

      state.cartProductIds = [];

    },

  },

});



export const { addToCart, removeFromCart, clearAllItems } = cartSlice.actions;

export default cartSlice.reducer;

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './app/store';

import App from './App';



ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

const selectedData = useSelector((state) => state.someData);

// src/features/cart/CartComponent.js

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { addToCart, removeFromCart, clearAllItems } from './cartSlice';



const CartComponent = () => {

  const cartProductIds = useSelector((state) => state.cart.cartProductIds);

  const dispatch = useDispatch();



  return (

    <div>

      <h1>Cart</h1>

      <ul>

        {cartProductIds.map((id) => (

          <li key={id}>

            Product ID: {id}

            <button onClick={() => dispatch(removeFromCart(id))}>Remove</button>

          </li>

        ))}

      </ul>

      <button onClick={() => dispatch(clearAllItems())}>Clear All</button>

      <button onClick={() => dispatch(addToCart(123))}>Add Product 123</button>

    </div>

  );

};



export default CartComponent;

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// Define an async thunk to fetch data
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId) => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    return response.json();
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => { 
        state.loading = true; 
      })
      .addCase(fetchUser.fulfilled, (state, action) => { 
        state.loading = false;
        state.data = action.payload; 
      })
      .addCase(fetchUser.rejected, (state, action) => { 
        state.loading = false;
        state.error = action.error.message; 
      });
  }
});

export default userSlice.reducer;