const {createSlice,createAsyncThunk} = require('@reduxjs/toolkit');
const axios = require("axios");



const getinfoFromServer = createAsyncThunk('getSominfoFromFakeAPI',async()=>{
const response = await axios.get('https://dummyjson.com/products').then(data => data);
return response.data.products;
})



const initialState = {
  value: 60,
  info:null
}

const counterSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
  extraReducers:(builder) =>{
      builder.addCase(getinfoFromServer.fulfilled,(state ,action)=>{
           state.info = action.payload;
      })
  }
});
const selectCount = (state) => state.users;

// Action creators are generated for each case reducer function
const{ increment, decrement, incrementByAmount } = counterSlice.actions;
// Action creators are generated for each case reducer function
exports.counterSlice = counterSlice;
exports.selectCount = selectCount;
exports.reducer = counterSlice.reducer;
exports.increment = increment;
exports.decrement = decrement;
exports.incrementByAmount = incrementByAmount;
exports.getinfoFromServer = getinfoFromServer;

const {createSlice,createAsyncThunk} = require('@reduxjs/toolkit');
const axios = require("axios");



// any async functions using createAsyncThunk you wanna add to your application



const initialState = {
  // add any intial value you would like to add to start your application with
}

const counterSlice = createSlice({
  name: 'users',// add any name you would like 
  initialState, // add initialState as your state you can add any object of any state you would like 
  reducers: {
    /* add the reducer to get and edite and delete your initialState  
       but all reducer you will add here only to be pure functions no async functions it's allowed here 
       if you would like to 
    */
  },
  extraReducers:(builder) =>{
  // to add the statge of all async functions and them reducer the same as normal reducer almost
  }
});
const selectCount = (state) => state.users;  /*
 here you export your state of users state.users and the name i make it users to can see the name in 
 create slice is so important to export your state so pay attantion to that 
 */ 

// Action creators are generated for each case reducer function
const{ increment, decrement, incrementByAmount } = counterSlice.actions;
// Action creators are generated for each case reducer function
/* this how you export your normal and asnyc reducer and the counter slice as the same */
exports.counterSlice = counterSlice;
exports.selectCount = selectCount;
exports.reducer = counterSlice.reducer;
exports.increment = increment;
exports.decrement = decrement;
exports.incrementByAmount = incrementByAmount;
exports.getinfoFromServer = getinfoFromServer;

const {configureStore} = require('@reduxjs/toolkit'); 
const {reducer} = require('./ReduxReducer/users');

 const store = configureStore({
    reducer: {
        users:reducer //the name of users it must be the same as in the createSlice one 
    },
  });

module.exports = store;

const {selectCount} = require('../ReduxReducer/users');
const store = require('../store'); // import store from store file 
const {increment,getinfoFromServer} = require('../ReduxReducer/users');

const userData = (req , res, next) =>{
    // use the getState from store to get our state selectCount from  our reducer users 
   const value = store.getState(selectCount); 

   res.status(200).json({message:'the request is scssful', data:value.users});
};


const editeusers = (req , res , next) => {
    // using  dispatch from store and put inside it increment from our reducer users
    store.dispatch(increment());
    const value = store.getState(selectCount); 
    res.status(200).json({message:'the request is scssful', data:value.users});
}; 

const testThunk = async(req,res,next)=>{
    // here we use the async reducer from our reducer users who using createAsyncThunk and extra reducer 
        await store.dispatch(getinfoFromServer()); 
        const value = store.getState(selectCount); 
        res.status(200).json(value);



}
 exports.userData = userData;
 exports.editeusers = editeusers;
 exports.testThunk = testThunk;