Create basic structure rockets Setup

package.json

@@ -10,9 +10,9 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
-    "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"

src/components/Missions.js

@@ -1,7 +1,23 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  incrementedMission,
+  decrementedMission,
+} from '../redux/missions/missions';
 
 function Missions() {
-  return <div>Missions</div>;
+  const dispatch = useDispatch();
+  return (
+    <div>
+      Missions
+      <button type="button" onClick={() => dispatch(incrementedMission())}>
+        Click me!
+      </button>
+      <button type="button" onClick={() => dispatch(decrementedMission(2))}>
+        Click me!
+      </button>
+    </div>
+  );
 }
 
 export default Missions;

src/components/Rockets.js

@@ -1,7 +1,19 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { incrementedRocket } from '../redux/rockets/rockets';
+import { selectCountMission } from '../redux/missions/missions';
 
 function Rockets() {
-  return <div>Rockets</div>;
+  const dispatch = useDispatch();
+  const count = useSelector(selectCountMission);
+  return (
+    <div>
+      Rocket
+      <button type="button" onClick={() => dispatch(incrementedRocket())}>
+        {`Click me! ${count}`}
+      </button>
+    </div>
+  );
 }
 
 export default Rockets;

src/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import './index.css';
+import store from './redux/configureStore';
 import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/redux/configureStore.js

@@ -0,0 +1,14 @@
+import { configureStore } from '@reduxjs/toolkit';
+import logger from 'redux-logger';
+import reducerRockets from './rockets/rockets';
+import reducerMissions from './missions/missions';
+
+const store = configureStore({
+  reducer: {
+    missions: reducerMissions,
+    rockets: reducerRockets,
+  },
+  middleware: [logger],
+});
+
+export default store;

src/redux/missions/missions.js

@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  countMission: 0,
+};
+
+const missionsSlice = createSlice({
+  name: 'missions',
+  initialState,
+  reducers: {
+    incrementedMission: (state) => ({
+      ...state,
+      countMission: state.countMission + 1,
+    }),
+    decrementedMission: (state, action) => ({
+      ...state,
+      countMission: state.countMission - action.payload,
+    }),
+  },
+});
+
+export const { incrementedMission, decrementedMission } = missionsSlice.actions;
+export const selectCountMission = (state) => state.missions.countMission;
+
+export default missionsSlice.reducer;

src/redux/rockets/rockets.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const rocketsSlice = createSlice({
+  name: 'rockets',
+  initialState: {
+    countRocket: 0,
+  },
+  reducers: {
+    incrementedRocket: (state) => ({
+      ...state,
+      countRocket: state.countRocket + 1,
+    }),
+  },
+});
+
+export const { incrementedRocket } = rocketsSlice.actions;
+export const selectCountRocket = (state) => state.rockets.countRocket;
+
+export default rocketsSlice.reducer;