haerhee/redux-counter-basic

redux-basic-practice

리덕스(redux) 연습을 위한 레포입니다.

redux-counter-basic's Issues

src/redux/config/configStore.js

[Feat] - action value, action creator 생성

📕 Issue Feature
action value, action creator 생성

🧾Todo

• action value, action creator 생성

// counter.js

// action value
export const PLUS_ONE = "plus_one";
export const MINUS_ONE = "minus_one";

// action creator : action value를 return하는 함수
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

[Feat] - 리덕스 세팅

📕 Issue Feature
리덕스 생성 및 세팅

🧾Todo

• src/redux/config/configStore.js

• src/redux/modules

• configStore.js

// 중앙 데이터 관리소(store)를 설정하는 부분
import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;

• index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

[Feat] - 리덕스 초기값, 리듀서 세팅

📕 Issue Feature
전체적인 작업사항을 입력해주세요

🧾Todo

• 초기값 및 리듀서 세팅

counter.js

// counter.js

// 초기 상태값(state)

const initialState = {
  number: 0,
};

//원래라면
// const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야.

// 리듀서 : "state에 변화를 일으키는"함수
// (1) state를 action의 type에 따라 변경하는 함수
// state를 action 안에 있는 type에 따라서 변경하는 작업

// input : state, action
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

configStore.js

// 중앙 데이터 관리소(store)를 설정하는 부분
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({
  //counter: counter 원래는 이 형태지만 단축 형태로 키밸류가 같으면 생략가능해(단축생략)
  counter,
});
const store = createStore(rootReducer);

export default store;