코딩애플 React Redux 개념

1. 스토어 생성 (리듀서 만들어서 인자에 넣는다.)

 

2. 리듀서 생성 (현재state, action 인자)

- state값을 쓸때 전개연산자로 복사해서 씁니다.

 

3. Provider  stroe={store}  스토어의 울타리 처리 해주기

-상태를 쓸곳만

 

4. 스토어의 무선 연결기능 useSelector (스토어 상태값을 콕집어서 쓴다)

- state.number 라는 값을 쓰겟다라는 뜻

 

5. Dispatch 액션 만들기 ( 상태를 어떤 기능을 취할 것인가? )

- dispatch 함수 인자에 action을 담아서 리듀서를 호출하게 한다.

 

6. reducer 함수의 두번째 인자의 action 설정

- if ( action.type 은 어떤 액션 ) 이라면, { state값을 어찌하겟다 }  그값을 return!

- 값을 복사한 state 객체를 사용하여 액션에 쓴다

// import React, { useState } from 'react';
import './App.css'
import { createStore } from 'redux';
//3. 스토어의 울타리 : provider store={store}
import { Provider, useSelector, useDispatch } from 'react-redux';

// 2.리듀서 생성
// 6. 디스패치 호출로 리듀서로 간다
function reducer(currentState, action) {
  if (currentState === undefined) {
    return {
      number: 1,
    };
  }
  // 항상 현재 스테이트 값을 복사한다.
  console.log('reducer')
  const newState = { ...currentState };
  // 7.엑션 타입 확인 문
  if (action.type === 'PLUS') {
    newState.number++;
  }
  return newState;
}
// 1. 스토어 생성 (리듀서 생성 된 것을 넣는다.)
const store = createStore(reducer);

export default function App() {

  return (
    <div id='container'>
      <h1>Root</h1>
      <div id='grid'>
        <Provider store={store}>
          <Left1 />
          <Ritght1 />
        </Provider>
      </div>
    </div>
  )
}

function Left1() {
  return <div>
    <h1>left1</h1>
    <Left2 />
  </div>
}

function Left2() {
  return <div>
    <h1>left2</h1>
    <Left3 />
  </div>
}

function Left3(props) {
  // 이런값을 쓰겟다 useSelcetor(f)하면되는 것을 줄여서 밑에 처럼 쓰는것이다.
  // function f(state){
  //   return state.number;
  // }
  // 4. 스토어 무선연결 useSelector
  console.log('useSelector')
  const number = useSelector(state => state.number);
  return <div>
    <h1>left3 :{number} </h1>
  </div>
}

function Ritght1() {
  return <div>
    <h1>rigth</h1>
    <Ritght2 />
  </div>
}

function Ritght2() {
  return <div>
    <h1>rigth2</h1>
    <Ritght3 />
  </div>
}

function Ritght3(props) {
  //5. dispatch 엑션 만들기 (상태 기능) > 디스패치 호출시 리듀서 호출 
  const dispatch = useDispatch();
  return <div>
    <h1>rigth3</h1>
    <input type='button' value='+'
      onClick={() => {
        dispatch({ type: 'PLUS' })
      }}></input>
  </div>
}