Redux react library by Kuldeep

Dependencies

npm install react-redux redux

Insert the following as below

index.js

  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>

App.js

import "./styles.css";
import { useSelector, useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators } from "./state/index";
export default function App() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  const { depositMoney, withdrawMoney } = bindActionCreators(
    actionCreators,
    dispatch
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>{state.account}</p>
      <button onClick={() => depositMoney(1000)}>Deposit money</button>
      <button onClick={() => withdrawMoney(1000)}>Withdraw money</button>
    </div>
  );
}

state/index.js

export * as actionCreators from "./action-creators/index";

state/store.js

import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers/index";
import thunk from "redux-thunk";
export const store = createStore(reducers, {}, applyMiddleware(thunk));

state/action-creators/index.js

export const depositMoney = (amount) => {
  return (dispatch) => {
    dispatch({
      type: "deposit",
      payload: amount
    });
  };
};

export const withdrawMoney = (amount) => {
  return (dispatch) => {
    dispatch({
      type: "withdraw",
      payload: amount
    });
  };
};

state/reducers/accountReducer.js

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "deposit":
      return state + action.payload;
    case "withdraw":
      return state - action.payload;
    default:
      return state;
  }
};

export default reducer;

state/reducers/index.js

import { combineReducers } from "redux";
import accountReducer from "./accountReducer";

const reducers = combineReducers({
  account: accountReducer
});

export default reducers;