React Redux Code

action-index.js

export const incrementNumber = () => {
    return{
        type: 'INCREMENT'
    }
}

export const decrementNumber = () => {
    return{
        type: 'DECREMENT'
    }
}

app.js

import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { incrementNumber, decrementNumber } from './action/index'

function App() {
  const myState = useSelector((state) => state.changeTheNumber)
  const dispatch = useDispatch()

  return (
    <div className="App">
      <header className="App-header">
        <h2>Calculation in React Redux</h2>
        <div className='calculation_block'>
          <button onClick={() => dispatch(decrementNumber())}>-</button>
          <input type='text' value={myState} />
          <button onClick={() => dispatch(incrementNumber())}>+</button>
        </div>
      </header>
    </div>
  );
}

export default App;

dataStore.js

import { createStore } from 'redux'
import rootReducer from "./reducer/index";

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())


export default store

index.js

import appStore from './dataStore';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={appStore}>
      <App />
    </Provider>
  </React.StrictMode>

react-redux.js

npm install redux
npm install react-redux

for more detail - https://redux.js.org/

reducer-calculation.js

const intitalState = 0;

const changeTheNumber = (state=intitalState, action) => {
    switch(action.type){
        case 'INCREMENT' : return state + 1
        case 'DECREMENT' : return state - 1
        default : return state;
    }
}

export default changeTheNumber

reducer-index.js

import changeTheNumber from "./calculation";
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    changeTheNumber
})

export default rootReducer