항해중인 개발자

리덕스 0327 본문

React

리덕스 0327

바다를바라보다 2021. 3. 28. 00:23

리덕스 스토어를 컴포넌트에 연결 > 컴포넌트에서 상태 변화가 필요할때 Action 부름 > 새 상태값을 store에 저장

컴포넌트는 새로운 상태값을 받아온다 이때 props 형태로 받아오니까 다시 렌더링이 된다.

 

 

리덕스 모듈 > 스토어 

 

// Actions
const LOAD = "bucket/LOAD"; //액션은 대문자 모듈은 소문자
const CREATE = "bucket/CREATE";

const initialState = {
  list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
};

// Action Creators // 이 함수들은 컴포넌트에서 불러와서 쓸 수 있어야함
export const loadBucket = (bucket) => {
  return { type: LOAD };
};

export const createBuckett = (bucket) => {
  //텍스트인풋 값을  bucket이라고 지정 근데 아무단어나 써도 된다
  // 위의 LOAD와는 다르게 생성해야 하는 함수니까 타입, 값 을 입력해줘야한다
  return { type: CREATE, bucket };
};

// Reducer 파라미터는 (기본값, 작동해야하는 액션함수)
export default function reducer(state = initialState, action = {}) {
  switch (
    action.type // 타입에 따라 작동한다
  ) {
    case "bucket/LOAD": {
      return state; //로드는 그냥 기본값을 로드해주는 친구여서 state 반환
    }
    case "bucket/CREATE": {
      //텍스트를 받아와서 새 배열을 만들고 새 배열을 어떤 딕셔너리 안에 있는 리스트란 키값에 새 배열 넣어줌

      const new_bucket_list = [...state, action.bucket]; // [기본배열, 크리에이트 버킷액션 값]
      return { list: new_bucket_list }; // 크리에이트 액션으로 만들 새로운 리스트 반환
    }

    default:
      return state;
  }
}
// 리듀서를 거친 값들이 저장되고 다시 state로 넘어가 컴포넌트에 적용하는 곳
// 리듀서를 받아온다
import { createStore, combineReducers } from "redux";
import bucket from "./modules/bucket";
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

const rootReducer = combineReducers({ bucket });

const store = createStore(rootReducer);

export default store;

 

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

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

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

'React' 카테고리의 다른 글

무한스크롤  (0) 2021.03.29
자바스크립트 필수문법  (0) 2021.03.28
리덕스 0327  (0) 2021.03.28
라우트 0327  (0) 2021.03.27
액션과 리듀서를 편하게 만들어주는 모듈  (0) 2021.03.26
프로토 타입이란?  (0) 2021.03.26
Tag
0 Comments
댓글쓰기 폼