[TIL]21.08.07

박주홍·2021년 8월 7일

Today I Learned

목록 보기

48/104

👨‍💻오늘 공부 한 것

Redux

Store === 은행
store안에는 state가 있다. state는 직접 접근이 불가능하다.
store안에 reducer가 있다
function reducer(oldState, action){
// ...
}
var store = Redux.createStore(reducer);

render는 redux와 상관없이 우리가 짤 ui를 만들어주는 코드

은행창고 직원분들
dispatch, subscibe, getState(state값을 가져오는)

getState로 Store안에 있는 state값을 가져오고 render을 사용해서 UI를 만드는 것 (렌더링)

subscribe은 state값이 바뀔때마다 render에서 getState로 state값을 번거롭게 다시 가져오지 않고, 자동으로 state값을 바꿔서 재렌더링하게 해주는
이런 식으로 사용==>> store.subscribe(render);

dispatch는 reducer를 호출해서 state값을 갱신하고, subscribe을 호출해서 render함수를 호출해줌

이런 식으로 사용함==>>

여기서 dispatch에 인자로 들어간 것이 action이다.

그리고 또한 reducer는 이렇게 사용한다.
===>>>
function reducer(state, action){
if(action.type === 'create'){
var newContents = oldState.contents.concat();
var newMaxId = oldState.maxId+1;
newContents.push({id: newMaxId, title: action.payload.title});
return Object.assign({}, state, {
contents: newContents,
maxId: newMaxId,
mode: 'read,
selectedId: newMaxId
});
}
}

** 리덕스를 쓰면 좋은 이유

innerHTML = `` <<== html규격 텍스트를 사용하면 됌.

*** 리덕스 쓰는 법
1) 리덕스 설치방법
1. npm install --save redux
2. html파일안의

reducer는 최초한번은 무조건 실행됌

reducer에서 return 으로 state값을 새로 갱신할때 새로운 데이터주소를 갖는 새로운 state를 return해야한다. 그렇지 않으면 시간여행이라는 redux의 좋은 기능을 쓰지 못한다.

Object.assign({}, oldState, {color: 'red'});

function test(){
var store = getState();
document.querySelector('body').innerHTML =
<h1>${store.color}</h1>;
}

store.subscribe(test);

디커플링, 리덕스를 사용해야하는 이유

코드간결, 복잡성줄어듬, 디커플링 각 함수, 컴포넌트간의 연결성이 줄어들어 복잡성이 줄어든다

*** 시간여행, 리덕스디버깅
reduxdevtool

리덕스 데브툴을 사용하기 위해선 코드에 다음과 같은 옵션이 필요하다.

var store = Redux.createStore(
reducer,
window.REDUX_DEVTOOLS_EXTENSTION &&
window.REDUX_DEVTOOLS_EXTENSTION()
);

리덕스로 CRUD

아직 update는 구현하지 못했다 내일 마저 구현할 예정이다.

<!doctype html>
<html>

<head>
<meta charset=“UTF-8”>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
</head>

<body>
<h1></h1>
<br>
<div id="contents_menu"></div>
<br><br>
<div id="crud_menu"></div>
<br><br><br>
<div id="content"></div>


<script>
  function reducer(state, action) {
    let newState = {};
    if (state === undefined) {
      newState = {
        maxId: 1,
        nowId: 0,
        mode: 'READ',
        contentsMenu: [
          {
            id: 0,
            title: 'Title',
            text: 'text1'
          },
          {
            id: 1,
            title: 'Title2',
            text: 'text2'
          }
        ]
      }
    }

    if (action.type === 'CHANGE_CONTENT') {
      newState = Object.assign({}, state, { nowId: action.id });
    } else if (action.type === 'CHANGE_MODE') {
      newState = Object.assign({}, state, { mode: action.mode });
    } else if(action.type === 'CREATE_PUSH'){
      newState = Object.assign({}, state, {maxId: state.maxId + 1});
      newState.contentsMenu.push({
        id: state.maxId + 1,
        title: action.title,
        text: action.text,
      });
    } else if(action.type === 'DELETE'){
      let temp = state.contentsMenu.filter((el) => el.title !== action.delete);
      newState = Object.assign({}, state);
      newState.contentsMenu = temp;
    }

    return newState;
  }
  const store = Redux.createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
  function makeh1() {
    let state = store.getState();
    document.querySelector('h1').textContent = state.contentsMenu[state.nowId].title;
  }

  function makeContentsMenu() {
    let state = store.getState();
    let i = 0;
    document.querySelector('#contents_menu').textContent = '';
    while (i < state.contentsMenu.length) {
      let makeH3 = document.createElement('h3');
      makeH3.textContent = state.contentsMenu[i].title;
      makeH3.value = state.contentsMenu[i].id
      makeH3.onclick = function () {
        store.dispatch({
          type: 'CHANGE_CONTENT',
          id: makeH3.value
        });
        read();
      }
      document.querySelector('#contents_menu').append(makeH3);
      i++;
    }
  }

  function makeCRUD() {
    document.querySelector('#crud_menu').innerHTML = `
      <button value="CREATE">CREATE</button>
      <button value="READ">READ</button>
      <button value="UPDATE">UPDATE</button>
      <button value="DELETE">DELETE</button>
    `
  }

  function read() {
    let state = store.getState();
    document.querySelector('#content').textContent = state.contentsMenu[state.nowId].text;
  }

  function create() {
    let temp = {};
    let inputTitle = document.createElement('input');
    let inputText = document.createElement('input');
    let buttonSend = document.createElement('button');

    inputTitle.onchange = (e) => {
      temp.title = e.target.value
    };

    inputText.onchange = (e) => {
      temp.text = e.target.value
    };

    buttonSend.onclick =  () => {
        store.dispatch({
          type: 'CREATE_PUSH',
          title: temp.title,
          text: temp.text
        });
    };

    buttonSend.textContent = 'Create!!';

    let content = document.querySelector('#content');
    content.textContent = '';
    content.append(inputTitle);
    content.append(inputText);
    content.append(buttonSend);
  }

  function _delete(){
    let content = document.querySelector('#content');
    content.textContent = '';
    let input = document.createElement('input');
    let buttonSend = document.createElement('button');
    let temp = '';
    input.onchange = (e) => {
      temp = e.target.value;
    }
    buttonSend.onclick = () => {
      store.dispatch({
        type: 'DELETE',
        delete: temp
      })
    }
    buttonSend.textContent = 'DELETE !!';
    content.append(input);
    content.append(buttonSend);
  }

  function reLoading() {
    let state = store.getState();
    if (state.mode === 'CREATE') {
      create();
    } else if (state.mode === 'UPDATE') {

    } else if (state.mode === 'DELETE') {
      _delete();
    } else if (state.mode === 'READ') {
      read();
    }
  }
  store.subscribe(makeh1);
  store.subscribe(makeContentsMenu);
  store.subscribe(reLoading);
  makeh1();
  makeContentsMenu();
  makeCRUD();


</script>
</body>

</html>

박주홍

고통없는 성장은 없다고 할 수 있겠다....

이전 포스트

[TIL]21.08.03

다음 포스트

[TIL]21.08.07

Today I Learned

Redux

리덕스로 CRUD

[TIL]21.08.03

[TIL]21.08.11

0개의 댓글