react-redux
벨로퍼트 블로그 정리
리덕스 모듈
- 특정 기능을 구현하기 위하여 필요한 액션과, 액션 생성함수와, 초기값, 리듀서 함수가 들어있는 파일
src/store/modules/counter.js
```javascript
// 1. 액션 타입 정의하기
const CHANGE_COLOR = "counter/CHANGE_COLOR";
const INCREMENT = "counter/INCREMENT";
const DECREMENT= "counter/DECREMENT";
// 액션 이름을 지을 떄 문자열의 앞 부분에 모듈 이름을 넣는데 이는 다른 모듈 작성 시 다른 액션과 충돌되지 않게 하기 위함
// 2.액션 생성함수 정의
export const changeColor = color = > ({ type : CHANGE_COLOR, color })
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
// export 한 함수들은 컴포넌트에 리덕스 연동 시 불러와서 사용할 수 있다
// 3. 초기상태와 리듀서 정의
const initialState ={
color : 'red',
number : 0,
};
// 4.리듀서 작성
// 상단에 정의한 action을 받아서 사용함, export default을 선언 해줘야 스토어를 만들때 이 함수를 사용할 수 있다
export default function counter(state = initialState, action){
switch(action.type){
case CHANGE_COLOR:
return {
...state,
color: action.color, // action.color은 어떤 color을 받는것인가?
}
case INCREMENT:
return {
...state,
number: state.number + 1,
};
case DECREMENT:
return {
...state,
number: state.number + 1,
};
default:
return state;
}
}
```
src/store/modules/index.js
리듀서가 여러개 일때는 redux의 내장 함수인 combineReducers를 사용하여 리듀서를 하나로 합친다
```javasciprt
import { combineReducers } from 'redux'
import counter from './counter';
export default combineReducers({
counter,
// 다른 리듀서를 만들면 여기에 넣어준다
});
```
스토어 생성
src/index.js
```javascript
// **** (1) createStore 와 루트 리듀서 불러오기
import { createStore } from 'redux';
import rootReducer from './store/modules';
const store = createStore(rootReducer); // 스토어를 만들고 현재 값을 사용할 수 있다
//Provider를 사용하여 리액트 프로젝트에 스토어 연동
//기존의 JSX를 Provider로 감싸고 store는 props로 Provider한테 넣어주면 됩니다.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root') );
```
src/containers/PaletteContainer.js
```javascript
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Palette from '../components/Palette';
import { changeColor } from '../store/modules/counter';
```