cree slices para post y coment

social-network/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.8",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

social-network/src/App.jsx

@@ -1,33 +1,12 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import { useSelector } from 'react-redux'
 
 function App() {
-  const [count, setCount] = useState(0)
-
+  const post = useSelector((state) => state.post);
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+    <h1>Hola</h1>
     </>
   )
 }

social-network/src/main.jsx

@@ -2,9 +2,13 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { store } from './redux/store.js'
+import {Provider} from 'react-redux';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <Provider store = {store}>
+      <App />
+    </Provider>
   </StrictMode>,
 )

social-network/src/redux/slice/coments/reducer.js

@@ -0,0 +1,8 @@
+import state from "../coments/state";
+import { ACTIONSCOMENTS } from "./types";
+
+export default{
+    [ACTIONSCOMENTS.SET_STATUS]:(state, action)=>{
+        state.status = action.payload;
+    }
+};

social-network/src/redux/slice/coments/slice.js

@@ -0,0 +1,25 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    coment:{
+        postId: null,
+        id: null,
+        name: '',
+        email: '',
+        body: ''
+    }
+}
+
+export const comentSlice = createSlice(
+    {
+        name: 'coment',
+        initialState,
+        reducers:{
+            setComent:(state, action)=>{
+                state.coment = action.payload;
+            }
+        }
+    });
+
+export const {setComent} = comentSlice.actions;
+export default comentSlice.reducer;

social-network/src/redux/slice/coments/state.js

@@ -0,0 +1,8 @@
+export default {
+    status:{
+        title:'Success information',
+        type:'success'
+    },
+    condition: 'no init',
+    coments:[]
+}

social-network/src/redux/slice/coments/thunks.js

@@ -0,0 +1,9 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { ACTIONSCOMENTS } from "./types";
+
+export const thunks = {
+    [ACTIONSCOMENTS.FETCH_COMENTS]: createAsyncThunk({id},'coments/fetchComents', async()=>{
+        const response = await fetch(`https://jsonplaceholder.typicode.com/comments?postId=`+{id});
+        return response.json();
+    }),
+};

social-network/src/redux/slice/coments/types.js

@@ -0,0 +1,4 @@
+export const ACTIONSCOMENTS = {
+        SET_STATUS: 'SET_STATUS',
+        FETCH_COMENTS: 'FETCH_COMENTS'
+};

social-network/src/redux/slice/posts/reducers.js

@@ -0,0 +1,8 @@
+import state from "./state";
+import { ACTIONSPOST } from "./types";
+
+export default{
+    [ACTIONSPOST.SET_STATUS]:(state, action)=>{
+        state.status = action.payload;
+    },
+};

social-network/src/redux/slice/posts/slice.js

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    post:{
+        userId: null,
+        id: null,
+        title: '',
+        body: ''
+    }
+}
+
+export const postSlice = createSlice(
+    {
+        name: 'post',
+        initialState,
+        reducers:{
+            setPost:(state, action)=>{
+                state.post = action.payload;
+            },
+        },
+    });
+
+export const {setPost} = postSlice.actions;
+export default postSlice.reducer;

social-network/src/redux/slice/posts/state.js

@@ -0,0 +1,8 @@
+export default {
+    status:{
+        title:'Success information',
+        type:'success'
+    },
+    condition: 'no init',
+    posts:[]
+}

social-network/src/redux/slice/posts/thunk.js

@@ -0,0 +1,9 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { ACTIONSPOST } from "./types";
+
+export const thunks = {
+    [ACTIONSPOST.FETCH_POST]: createAsyncThunk('post/fetchPosts', async()=>{
+        const response = await fetch(`https://jsonplaceholder.typicode.com/posts`);
+        return response.json();
+    }),
+};

social-network/src/redux/slice/posts/types.js

@@ -0,0 +1,4 @@
+export const ACTIONSPOST = {
+    SET_STATUS: 'SET_STATUS',
+    FETCH_POST: 'FETCH_POST'
+};

social-network/src/redux/store.js

@@ -0,0 +1,10 @@
+import {configureStore} from '@reduxjs/toolkit';
+import  postSlice  from './slice/posts/slice';
+import { comentSlice } from './slice/coments/slice';
+
+export const store = configureStore({
+    reducers:{
+        post: postSlice,
+        coment : comentSlice
+    }
+});