Counter App
//============== action.js
export const inc = () => {
return {
type: "INCREMENT",
};
};
export const dec = () => {
return {
type: "DECREMENT",
};
};
//============== reducer.js
const initialState = 0;
const counterRducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
if (state == 0) {
return 0;
} else {
return state - 1;
}
default:
return state;
}
};
export default counterRducer;
//============== rootReducer.js
import { combineReducers } from "redux";
import reducer from "./reducer";
const rootReducer = combineReducers({reducer});
export default rootReducer;
//============== store.js
import { createStore } from "redux";
import rootReducer from "./reducers/index";
const store = createStore(rootReducer);
export default store;
//============== connection in index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,document.getElementById("root"));
//============== render data in App.js
import React from "react";
import { inc, dec} from "./actions";
import { useSelector, useDispatch } from "react-redux";
const App = () => {
const count = useSelector(state => state.reducer);
return (
<>
<h1>Counter App</h1>
<h3>Count : {count} </h3>
<button onClick={() => dispatch(inc())}>+</button>
<button onClick={() => dispatch(dec())}>-</button>
</>
);
};
export default App;