실용 Redux

→ Open in Slid

---

‏‏‎ ‎

* 일단 Redux를 사용하기 위해서는 createStore 로 store를 만든다.

function reducer (state, action){
  if(state === undefined){//일단 Redux.createStore()를
    //실행하면 무조건 1번은 먼저 실행되는데 이때 state 값이
    //undefined 가 나온다. 이때 초기 값을 정해 주어야 한다.
    return {
      contents:[
        {id:1,title:'HTML',desc:'HTML is ..'},
        {id:2,title:'CSS',desc:'CSS is ..'}
      ]
    }    
  }
}
var store = Redux.createStore(reducer);

function TOC(){
  var state = store.getState();
  var i = 0;
  var ligTags ='';
  while(i<state.contents.length){
    liTag = liTags + `
    	<li>
        	<a href='${state.contents[i].id}'>
            ${state.contents[i].title}</a>
        </li>;
    `
    i = i+1;
  }
}

<li>
        	<a onClick='
				event.preventDefault() //페이지 넘어가지 
//				않게..	
			href='${state.contents[i].id}'>
            ${state.contents[i].title}</a>
        </li>;
    `

var newState;
if(action.type === 'SELECT'){
  newState = Object.assign({},state)
}

varstore = Redux.createStore(reducer);

store.subscribe(article);

article을 구독하면서 state가 변할때마다 article을 호출하게 해서

1.HTML, 2.CSS 를 누를때 desc 가 불러오게 한다.

---

생성하기 만들기 (create)

일단 create 눌렀을때 화면 전환을 못하게 하기 위해

event.preventDefault()를 넣어준다.

reducer 에 return 값에 mode 를 만들고 create 일때는 쓰기 상태 read 일때는 읽기 상태로 만든다.

‏‏‎ ‎

객체를 복사 할때는 Object.assign 이고 배열을 복사할때는 concat()을 쓴다.

배열을 concat으로 복사한후 변화낸 내용을 push 한다. 그리고 다시 객체로 만들기 위해

Object.assign 을 한다.

---

delete 구현

<input onClick="
	store.dispatch({
      type:'DELETE'
    })
" type="button" value="delete">
// input 을 버튼으로 만들고 onClick에 dispatch로 type DELETE를 
//reudcer에 보낸다. 

//control 함수에 보낸 delete의 dispatch 를 reducer 의 action.type
//action.type 가 'DELETE' 인 코딩을 따른다. 
else if (action.type === 'DELETE'){
  var newContents = [];
// 새로운 배열을 받기 위해 새로운 배열을 초기화 한다. 
  var i = 0;
  while(i < state.contents.length){
    if(state.select_id !== state.contents[i].id){
      newContents.push(
      	state.contents[i]);
//constens 갯수 만큼 돌면서 select_id 와 데이타에 있는 contens
// 의 id를 [i] 만큼 일일히 검색하면서 서로 같지 않는 것은 
// 새로운 배열에 push 한다. 즉 내가 지우고자 한 콘텐츠를 제외한 모든
// contents로 새로운 배열을 만드는 식으로 delete를 구현한다.
    }
    i = i+1;
  }
}

newState = Object.assign({},state,{
  contents:newContents,
  mode:'welcome'
})
// reducer 에 있는 contents 의 형식과 같게 저장을 하귀위해서는 원본이
// 아니라 꼭 복사본을 이용해야 하기 때문에 변한 값을 포함하여 새롭게
// 복사한다. 
//newState 에 Object.assign 을 이용해 {} 객체에 state 와 새롭게 
// update 한 contents를 store에 저장한다. 객체로서..
// 또한 mode를 하나 더 'welcome'을 만들어 
// articl 함수로 보내준다. 

function article(){
    var state = store.getState();
  ..../
  else if(state.mode === 'welcome'){
        document.querySelector('#content').innerHTML = `
        <article>
            <h2>Welcome</h2>
            Hello, Redux!!!
        </article>
        `
    }
 // article()에서 store의 정보를 getState()불러 state에 담는다.
 // state.mode === 'welcome' 인경우 article 문자를 출력한다. 

‏‏‎ ‎

‏‏‎ ‎