Study_240527 (리액트 redux 간단 학습)

 

import { useSelector, useDispatch } from "react-redux";

import { addNumber, removeNumber } from "./redux/slices/counterSlice";

import { useState } from "react";

const App = () => {

  const [count, setCount] = useState(0);

  const counterReducer = useSelector((state) => state.counter);

  const dispatch = useDispatch();

  return (

    <div>

      {counterReducer.number} <br />

      <input

        type="number"

        value={count}

        onChange={(e) => {

          setCount(+e.target.value);

        }}

      />

      <button

        onClick={() => {

          dispatch(addNumber(count));

        }}

      >

        더하기

      </button>

      <button

        onClick={() => {

          dispatch(removeNumber(count));

        }}

      >

        빼기

      </button>

    </div>

  );

};

export default App;

 

import { createSlice } from "@reduxjs/toolkit";

const initialState = {

  number: 0,

};

const counterSlice = createSlice({

  name: "counter",

  initialState,

  reducers: {

    addNumber: (state, action) => {

      state.number = state.number + action.payload;

    },

    removeNumber: (state, action) => {

      state.number = state.number - action.payload;

    },

  },

});

export const { addNumber, removeNumber } = counterSlice.actions;

export default counterSlice.reducer;

 

import { configureStore } from "@reduxjs/toolkit";

import counterSlice from "../slices/counterSlice";

const store = configureStore({

  reducer: {

    counter: counterSlice,

  },

});

export default store;