22.12.15)react숙련을 복습한 34일차

#오늘배운 것

 

react숙련 복습

redux폴더는 redux와 관련된 코드들을 모아놓을 폴더

config폴더는 redux의 설정과 관련된 파일을 모아 놓을 폴더

configStore파일은 중앙스테이트 관리소!

modules폴더는 우리가 만들 state의 그룹

 

1.우리가 작성하는 설정 코드는 이해할 필요가 없는 코드다.

2. redux 사용 방법을 중점으로 공부하자.

 

Redux 안에는 Store, 그 안에는 reducer가 포함이 되있다.

여기서 어떤 action을 일으킨다 == dispatch라고 한다.

//index.js
// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <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
reportWebVitals();

//app.jsx
import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.

const App = () => {
  const counterStore = useSelector((state) => state);
  // const counterStore= userSelector(function(state){
  //   return state;
  // })이것과 같은 의미다. 화살표함수에서 꺼낸 state인자는 프로젝트에 존재하는 모든 redux modules의 state를 가져와라는 뜻이다.
  const number = useSelector((state) => state.counter.number);
  return <div></div>;
};

export default App;

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서: 변화를 일으키는 함수.setState같은 역할을 해낸다.
//현재 modules과 store가 따로 분리되어있는 상황.그래서 카운터 modules을 store에 연결해본다
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

//src/config/configStore.jsx
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/count";

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({
  counter: counter, //store와 modules을 연결했다.
});
const store = createStore(rootReducer);

export default store;

 

이후 개인 과제 작업..내일까지 마감 화이팅..