{
  type: "CHANGE_NUMBER",  //* 꼭 type이 필요하다. 나중에 이 action을 불러올 때 쓰는 값.
  number: 2            //* 그 외의 값들은 payload라 하며 자신이 필요한 값을 넣으면 된다.
}

export const INCREMENT = 'INCREMENT'; //export는 다른 파일에서도 써야 하니 꼭 붙여주자.
export const DECREASE = 'DECREASE';
export const increase = () => ({ type: INCREASE }); // 이렇게 만드는 것이 액션 함수.
export const decrease = () => ({ type: DECREASE });

const initialState = {
	number: 0,
};

function changeNumber(state = initialState, action) {
	// 초기값을 지정해주고, 2번 째 인자로 액션이 있다.
	switch (action.type) {
		case INCREMENT: // 타입을 넣어 준다.
			return {
				...state, // 이 때 state를 직접 수정하면 안된다고 한다.
				// 그래서 새로운 객체를 만들어 반환하자.
				number: state.number + 1,
			};
		case DECREASE:
			return {
				...state,
				number: state.number - 1,
			};
		default:
			return state;
	}
}
export default changeNumber;

import { createStore } from 'redux';
import reducers from './reducers';

// 스토어 생성 인자로 위에서 만든 리듀스 함수를 넣어주면 된다고 한다.
// 2번째 인자로 리덕스 개발자 도구를 넣을 수 있다.
// 따로 구글 확장프로그램[Redux DevTools]을 설치하자.

const store = createStore(reducers);

// npm i redux-devtools-extension 패키지 설치 후
// 요렇게 할 수 있다고 한다.
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducers, composeWithDevTools());

import { combineReducers } from 'redux'; //위에 이 문구를 추가하자.

const rootReducer = combineReducers({
	changeNumber,
	otherfunction, // 만약 다른 리듀서가 있으면 이렇게 추가하면 된다.
});
// 이렇게 한 곳에 모아두자.

// 그리고 밑에처럼 한 번에 rootReducer를 이용해서 store에 넣으면 된다.
const store = createStore(rootReducer, composeWithDevTools());

//store에 있는 state값을 연결해주는 역할.
const mapStateToProps = (state) => ({
	number: state.number, // 위에서 만든 initialState.number이다.
	//state.changeNumber.number인지 헷갈린다.
});

//dispatch에 액션을 넣어주는 역할
const mapDispatchToProps = (dispatch) => ({
	increase: () => {
		dispatch(increase());
	},
	decrease: () => {
		dispatch(decrease());
	},
});

//이렇게 하고
//버튼을 만든 후 onClick={increase} 하면 함수를 사용 가능.
export default connect(mapStateToProps, mapDispatchToProps)(CountContainer);

const changeNumber = props => {

 const number = useSelector((state) =>state.number)
 const dispatch = useDispatch();

 return (
   <button onClick={() => dispatch(increase())}>
   //여기서 increase 액션함수에서 정의 해준 값이다.
 )
}