반응-Redux

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')
);

// 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;

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;

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;

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;

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; 

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;

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
    },
})