OLD logique de base

avec combine
store non mutable

src/App/App.jsx

@@ -8,10 +8,13 @@ import { MemeSVGThumbnail, MemeSVGViewer, emptyMeme } from 'orsys-tjs-meme'
 import MemeForm from './components/functionnal/MemeForm/MemeForm';
 import Footer from './components/ui/Footer/Footer';
 import { Route, Routes } from 'react-router-dom';
+import {showModal, store, storeInitialState} from './store/store'
+import Button from './components/ui/Button/Button';
 function App(props) {
   const [meme, setmeme] = useState(emptyMeme);
   const [imgs, setimgs] = useState([]);
   const [memes, setmemes] = useState([]);
+  const [storeState, setstoreState] = useState(storeInitialState)
   useEffect(() => {
     const prImg = fetch(`http://localhost:5679/images`)
       .then(r => r.json())
@@ -24,13 +27,17 @@ function App(props) {
         setmemes(arr[1]);
         setimgs(arr[0])
       });
+      setstoreState(store.getState());
+      store.subscribe(()=>{setstoreState(store.getState())});
   }, [])
   return (
     <FlexH3Grow>
       <Header />
+      <Button onButtonClick={()=>store.dispatch(showModal('coucoucoucou'))}>click surtout pas ICI !!</Button>
       <Navbar />
       <FlexW1Grow>
         <Routes>
+          <Route path='/' element={<h1>Hello</h1>} />
           <Route path='/thumbnail' element={<MemeSVGThumbnail memes={memes} images={imgs} basePath='' />} />
           <Route path='/meme' element={<>
             <MemeSVGViewer meme={meme} image={imgs.find((img) => img.id === meme.imageId)} basePath='' />
@@ -39,11 +46,10 @@ function App(props) {
             }} />
           </>} />
         </Routes>
-
       </FlexW1Grow>
       <Footer />
     </FlexH3Grow>
   );
 }
 
-export default App;
+export default App;

src/App/pages/MemeEditor/MemeEditor.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MemeSVGViewer } from 'orsys-tjs-meme';
+import MemeForm from '../../components/functionnal/MemeForm/MemeForm';
+
+function MemeEditor(props) {
+
+    return (<>
+        <MemeSVGViewer meme={meme} image={imgs.find((img) => img.id === meme.imageId)} basePath='' />
+        <MemeForm meme={meme} images={imgs} onMemeChange={(meme) => {
+            setmeme(meme);
+        }} />
+    </>
+    )
+}
+
+MemeEditor.propTypes = {
+    id: PropTypes.number,
+}
+
+export default MemeEditor

src/App/pages/MemeThumbnail/MemeThumbnail.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function MemeThumbnail(props) {
+  return (
+    <div className='MemeThumbnail'>
+        <MemeSVGThumbnail memes={memes} images={imgs} basePath='' />
+    </div>
+  )
+}
+
+export default MemeThumbnail

src/App/store/store.js

@@ -0,0 +1,24 @@
+import { createStore, combineReducers } from "redux"
+
+export const storeInitialState = { content: '', isShown: false }
+
+const reducer = (state = storeInitialState, action) => {
+    console.log(action);
+    switch (action.type) {
+        case 'modal/show':
+            return { ...state, content: action.payload, isShown: true }
+        case 'modal/hide':
+            return { ...state, content: '', isShown: false }
+        default:
+            return state
+    }
+}
+export const store=createStore(combineReducers({modal:reducer,modal2:reducer}));
+store.subscribe(()=>{console.log(store.getState())});
+
+store.dispatch(showModal('coucou'))
+store.dispatch({type:'modal/hide'})
+
+export function showModal(content){
+    return {type:'modal/show',payload:content}
+}