A simple counter application built with React and RxDux-State-Manager to demonstrate state management using RxJS. This project showcases how to manage and update state efficiently in a React application.
This project is a simple counter application that demonstrates the use of RxDux-State-Manager for state management in a React application. The app consists of three counters that can be incremented, decremented, and reset independently.
- Increment and decrement individual counters.
- Reset all counters to zero.
- Demonstrates efficient state management using RxJS.
- Node.js and npm installed on your machine.
- Clone the repository:
git clone https://github.com/your-username/simple-counter-app.git
cd simple-counter-app
- Install the dependencies:
npm install
Start the development server:
npm start
The app will be available at http://localhost:3000
.
The application consists of three counters, each with its own increment and decrement buttons. There is also a button to reset all counters to zero.
State management is handled by RxDux-State-Manager. The state manager is initialized in the rxduxStore.ts
file.
// src/rxduxStore.ts
import { easyStateManager } from "rxdux-state-manager";
export const {
useStateManager: useGlobalState,
$state: $globalState,
updateState: updateGlobalState,
} = easyStateManager({
counters: [0, 0, 0], // Initial state with three counters
});
export const counterActions = {
increment: (index: number) => {
updateGlobalState((draft) => {
draft.counters[index]++;
});
},
decrement: (index: number) => {
updateGlobalState((draft) => {
draft.counters[index]--;
});
},
reset: () => {
updateGlobalState((draft) => {
draft.counters = [0, 0, 0];
});
},
};
The Counter
component is used to display and control each counter.
// src/Counter.tsx
import React from "react";
import { useGlobalState, counterActions } from "./rxduxStore";
interface CounterProps {
index: number;
}
const Counter: React.FC<CounterProps> = ({ index }) => {
const { counters } = useGlobalState("counters");
return (
<div className="counter">
<p>Counter {index + 1}: {counters[index]}</p>
<button onClick={() => counterActions.increment(index)}>Increment</button>
<button onClick={() => counterActions.decrement(index)}>Decrement</button>
</div>
);
};
export default Counter;
The App
component includes multiple Counter
components and a reset button.
// src/App.tsx
import React from "react";
import Counter from "./Counter";
import { counterActions } from "./rxduxStore";
import "./App.css";
const App: React.FC = () => {
return (
<div className="App">
<h1>Simple Counter App</h1>
<Counter index={0} />
<Counter index={1} />
<Counter index={2} />
<button onClick={counterActions.reset}>Reset All Counters</button>
</div>
);
};
export default App;
Contributions are welcome! Please open an issue or submit a pull request for any changes.
This project is licensed under the MIT License. See the LICENSE file for details.
Feel free to replace `"your-username"` in the GitHub URL with your actual GitHub username. This README provides a comprehensive guide for users to understand and get started with the Simple Counter App project.