react.js 시작하기 190808 - redux 사용하기

클릭하면 숫자가 1씩 증가하는 것을 만들 예정이다.

 

총 5단계로 나뉘어진다.

 

일단 App.js에서 이루어진다.

import React, { Component } from 'react';

class App extends Component {
  
  render() {
    console.log(`app .js `)
    return (
      <div>
        <h1>{this.props.num}</h1>
          <button onClick={this.props.onMyClick}>bnt</button>        
      </div>
    );
  }
}

이렇게 설정한다 App.js가 받은 props를 받아 사용하기때문에

h1태그에는 this.props.num을 넣어주어따.

 

button을 누르면 onMyClick이 실행되고 h1의 num이 증가된다.

 

1. action 만들기

const actionTo = (dispatch)=>{
  console.log(`action call`);
  return {
    onMyClick : ()=>{
      dispatch({
        type: 'MYCLICK',
      })
    },
  }
}

action은 event라고 봐도 무방하다

process의 진행상황을 알 수 있도록 로그를 찍어주는 것도 좋다.

 

action은 return에 함수를 전달하게 되고 그 함수는 dispatch를 전달하는데 그 안에 type이 있다.

여기서의 type은 보편적으로 대문자로 작성하는 것이 좋다.

 

이제부터 onMyClick이라는 속성을 쓰겠다 이렇게 의미설정을 한다.

여기에 설정한 타입이 reduce로 간다 --- action ---

 

reduce는 switch로 되어있다.

MYCLICK을 들고 reduce로 뛰가면 있다.

 

2. reduce 만들기

여기서 만든 애들은 내가 임의로 만들었기 때문에 다르게 지어도 상관이 없다.

그냥 의미상 명확하게 기억하기 위해서 지어 놓은 것이다.

export function reducer(state = {	//여기서 state의 초기값을 설정 할 수 있다.
  num : 0,
},action ){
  console.log(`reducer call`);
  switch (action.type) {
    // TODO
    //--------------------------------------------------------------//
    case 'MYCLICK':
      state = {
        num :state.num+1	//오로지 여기서만 값을 변경할 수 있음
      }             
      console.log(`reducer my click`);
      return state//꼭
    //--------------------------------------------------------------//
    default:  return state//꼭
  }            
}

reduce는 state와 action을 반드시 매개변수로 받는다

만약 이 action에서 받기 싫다면 null로 설정하면 된다.

가장 중요한 것은 이 reduce에는 반드시 switch문이 포함되어 있어야 한다.

그리고 action에서 넘어온 type을 switch에서 검증한다.

 

각 케이스에는 return state를 해주어야 한다. 다음단계가 state이기 때문이다.

 

reduce의 3가지 주의사항이 있다.

 

1. 상태변화는 반드시 reduce에서 일어나야 한다.

state의 갱신은 모두 reduce가 한다. 다른 곳에서 할수있지만 하면 절대 안된다.

2. reduce는 반드시 순수함수여야 한다.

받은 값의 갱신과 가공이 불가하고 외부 전역변수도 끌고와서 사용할수가 없다.

3. action은 값을 전달하지는 않는다.

값은 다른 곳에서 가지고 들어온다. state에서 초기값을 처음 설정해 주어야한다.

 

3. state 만들기

자 그럼 state를 설정해보자

const stateTo = (state)=>{
  console.log(`stateTo call`);
  return {
    num : state.num
  }
}

이곳은 데이터의 마지막 여정이 되는 곳이다 비로소 값에 변화된 값을 넣어준다.

이 부분이 끝나면 컴포넌트로 간다.

주의 할 점은 여기서 코드를 갱신하면 절대로 안된다.

 

 

4. index.js 설정하기

 - store에 reduce등록

 - Provider에서 App으로 store전달

npm install redux --save
npm install react-redux --save
npm install redux-actions -save

터미널 열고 입력하자 다 다운 받아야 한다.

뒤에 --save는 요청한 것을 install한 뒤 package.json의 dependency에 기록해 달라는 말이다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

index.js의 기본 모양은 이렇다.

그럼 방금 install한 라이브러리들을 사용해보자

import App, { reducer } from './App';

App.js에 있는 reducer라는 함수를 불러서 사용한다.

이 reducer를 스토어에 넣어주기 위해서이다.

 

위에 적혀진 코드에서 수정하는 것이 아닌 추가적인 import를 해주자.

import { createStore } from 'redux'
import { Provider } from 'react-redux'

이거 두개를 해주면 스토어와 프로바이더(공급자,제공자)를 사용할 수 있다.

 

ReactDOM...어쩌고 위에 스토어를 만들어 주자

const store = createStore(reducer)

createStore를 해주고 그 안에 App.js에서 만들어준 reduce를 넣어준다.

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

자, 지금 reduce는 store에 등록이 되었고 등록된 store를 provider를 사용해서 App에 전달해 주었다.

 

이것을 통해 App.js에서는 store를 사용할 수 있게 되었다.

 

이제 그럼 다시 App.js로 가자

 

5. App.js에서 설정

 

맨위에 react 밑에 선언해주자

import { connect } from 'react-redux'

connect라는 이름으로 사용할 것이다.

 

자 이제 맨 아래쪽으로 가자.

export default App;

이렇게 되어있는 것을

export default connect(
  stateTo,        //state는 뭐씀?
  actionTo        //action은 뭐씀? 갈쳐드림 ㅇㅇ
)(App);

이렇게 바꿔준다.

 

App.js를 가져갈때 react-redux를 제공하는 connect가 state와 action을 제공하겠다 뭐 그런 뜻이 된다.

 

자 이제 건들일 것이없다.

 

사실 맨 처음에 App.js에 render()에 있는

    return (
      <div>
        <h1>{this.props.num}</h1>
          <button onClick={this.props.onMyClick}>bnt</button>        
      </div>
    );

얘도 나중에 해줘야하는데 그냥 편의를 위해 맨 앞부분에 배치했다.