_Folder Structure:- _
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './app/Store';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
App.js
// import logo from './logo.svg';
import './App.css';
import Coin from './features/coin/Coin';
import Counter from './features/counter1/Counter';
import Theme from './features/theme/Theme';
function App() {
return (
<div className="App">
<Counter />
<Coin />
<Theme />
</div>
);
}
export default App;
Counter.js
import { useSelector, useDispatch } from "react-redux"
import { decrement, increment, incrementByAmount } from "./counterSlice"
// import { useState } from 'react';
const Counter = () => {
const count = useSelector((state) => state.counter10.countaksh);
const a1 = useSelector((state) => state.theme10.color1)
const dispatch = useDispatch();
return (
<div>
<button className='button' area-label='Increment value' onClick={() => { dispatch(decrement()) }}> - </button>
<span className='value' style={{ color: a1 }}>{count}</span>
<button className='button' area-label='Decrement value' onClick={() => { dispatch(increment()) }}> + </button>
<button className='button' onClick={() => { dispatch(incrementByAmount(10)) }}> + </button>
</div>
)
}
export default Counter;
counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
const initialState1 = {
countaksh: 0,
}
export const counterSlice = createSlice({
name: 'counter99',
initialState: initialState1,
reducers: {
increment: (state0) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state0.countaksh += 1
},
decrement: (state0) => {
state0.countaksh -= 1
},
incrementByAmount: (state, action) => {
state.countaksh += action.payload
},
},
})
// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
coin.js
import React from 'react';
import { useSelector } from 'react-redux';
function Coin() {
const c1 = useSelector((state) => state.theme10.color1);
const rudra = useSelector((state) => state.counter10.countaksh);
return <div>
<span className='value' style={{color: `${c1}`}}>Coin: {rudra}</span>
</div>;
}
export default Coin;
theme.js
import React, { useState } from 'react';
import { useDispatch } from "react-redux"
import { changeTextColor } from './themeslice';
function Theme() {
const [Color, setColor] = useState("white")
const dispatch1 = useDispatch()
return <div>
<input className='textbox' type="text" onChange={(e) => setColor(e.target.value)} />
<button className='button' onClick={() => { dispatch1(changeTextColor(Color)) }}>Change Text Color</button>
{/* <h1 style={{ Color: 'white' }}> {Color} </h1> */}
</div>;
}
export default Theme;
themeSlice.js
import { createSlice } from '@reduxjs/toolkit'
const initialState1 = {
color1: "",
}
export const themeSlice = createSlice({
name: 'theme1',
initialState: initialState1,
reducers: {
changeTextColor: (state, action) => {
state.color1 = action.payload
},
},
})
// Action creators are generated for each case reducer function
export const { changeTextColor } = themeSlice.actions;
export default themeSlice.reducer;
store.js
import { configureStore } from '@reduxjs/toolkit'
import counterSlice from '../features/counter1/counterSlice'
import themeslice from '../features/theme/themeslice'
export default configureStore({
reducer: {
counter10: counterSlice,
theme10: themeslice
},
})
Output Photo
Top comments (0)