// store/index.js
import { createStore } from 'redux';

import rootReducer from '../reducers/index';

// createStore : store 생성 함수. 첫번째 인자로 reducer를 갖는다.
const store = createStore(rootReducer)

export default store;

// js/reducers.js

const initialState = {
    data: [];
};

// 순수 reducer 함수. 첫번째 인자로 initialState, 두번째 인자로 action
const rootReducer = (state = initialState, action) => state;
// 위 함수는 아무것도 하지 않고 initial state를 단순히 리턴 할 뿐.
// action을 추가해야한다 !

export default rootReducer;

{   
    // 모든 action들은 state가 어떻게 변해야 하는지를 나타내는 type 속성 필요
    type: 'ADD_DATA',
    // reducer는 나중에 이 payload를 현재의 state에 추가한다.
    payload: {
      name: 'React Redux Tutorial',
      id: 1
    }
}
// action은 단지 자바스크립트 객체일 뿐

// actions/index.js

// 타입 불러오기
import { ADD_DATA } from "../constants/action-types";

// action creator : action들을 감싸는 함수
export const addData = data => ({ 
    // type 속성은 단순히 문자열(string)일 뿐이다.
    // reducer는 state를 어떻게 처리해야 하는지를 판단하기 위해 이 문자열을 사용
    // 문자열은 오타가 나거나 중복되기 쉬운 경향이 있기 때문에 action의 type을 상수로 선언하는 편이 좋다.
    // 상수로 선언하면 추후 디버깅 시 어려운 오류를 피하는데 좋다.
    type: "ADD_DATA",
    payload: data
  });

// constants/action-types.js
export const ADD_DATA = "ADD_DATA";
// type 속성은 단순히 문자열(string)일 뿐이다.
// reducer는 state를 어떻게 처리해야 하는지를 판단하기 위해 이 문자열을 사용
// 문자열은 오타가 나거나 중복되기 쉬운 경향이 있기 때문에 action의 type을 상수로 선언하는 편이 좋다.
// 상수로 선언하면 추후 디버깅 시 어려운 오류를 피하는데 좋다.

// reducers/index.js

// action type 불러오기
import { ADD_DATA } from "..//constants/action-types";

const initialState = {
    data = [];
}

// reducer에 action 추가

// reducer는 action type에 따라서 새로운 state를 계산하고, 일치하는 action type이 없을 때는 적어도 초기 state를 리턴
const rootReducer = (state = initialState, action) {
    // action type의 값을 기준으로 switch
    // switch 문을 if 문으로 변경 가능
    switch (action.type) {
        // action type이 ADD_DATA인 경우
        case ADD_DATA:
            // state는 불변해야하므로 spread operator를 사용
            // (push 등 원본 배열을 바꾸는 method는 사용하면 안된다.)
            // state인 data의 원본을 복사하여 payload를 넣어준다.
            return { ...state,  data: [...state.data, action.payload] } ;
            // 위와 같이 작성하면 초기 state는 전혀 영향을 받지 않고 state 객체는 변경되지 않는다.
            // return 값은 초기 state의 복사본이다.
        // cast에 해당 되지 않는 경우 기본 값
        default:
            // 일치하는 action type이 없을 때는 적어도 초기 state를 리턴
            return state;
    }
};

export default rootReducer;

// src/App.js

import React from 'react';
import './App.css';

import store from "./js/store/index";
import { addArticle } from "./js/actions/index";

// 콘솔에서 테스트해보기 위해 작성한 코드
window.store = store;
window.addArticle = addArticle;

class App extends React.Component {
render() {
    return (
    <div>
    </div>
    );
  }
}

export default App;

// syntax
// store에는 초기 state가 있다.
store.getState()

store.getState() // {data: Array(0)}

// syntax
store.subscribe(콜백 할 함수) 

store.subscribe(() => console.log('Hello Redex')) // action이 dispatch 될 때마다 콘솔에 Hello Redux 출력

// state에 action 추가
store.dispatch( addData({ title: 'React Redux Tutorial', id: 1 }) )

// state 변경 확인
store.getState() // {articles: Array(1)}

$ npm i react-redux

import React from "react"; 
import { connect } from 'react-redux';
import { incrementAction, decrementAction } from "./Actions"; 

const counterSelector = state => state.counter; 

const CounterComponents = props => { 
    return ( 
        <> 
            <p> count: {props.counter} </p> 
            <button onClick={props.increment}>increment</button> 
            <button onClick={props.decrement}>decrement</button> 
        </> 
    ); 
}; 

const mapStateToProps = state => ({ counter: counterSelector(state) }); 

const mapDispatchToProps = dispatch => (
    { increment: () => dispatch(incrementAction()), 
      decrement: () => dispatch(decrementAction()) }
    ); 

const Counter = connect( mapStateToProps, mapDispatchToProps )(CounterComponents);

// 컴포넌트
import React from "react"; 
import { useDispatch, useSelector } from "react-redux"; 
import { incrementAction, decrementAction } from "./Actions"; 

const counterSelector = state => state.counter; 

const Counter = props => { 
    // useDispatch() : Action 객체를 Reducer로 전달해주는 메소드.
    const dispatch = useDispatch(); 
    // useSelector(state) : 컴포넌트와 state를 연결.
    const counter = useSelector(counterSelector); 
    
    return ( 
        <> 
            <p> count: {counter} </p> 
            <button onClick={dispatch(incrementAction())}>increment</button> 
            <button onClick={dispatch(decrementAction())}>decrement</button> 
        </> 
    ); 
};