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';

 

 

```