React Redux 설치 및 세팅 방법

React Redux 설치 및 세팅 방법

1. create-react-app 설치

npx create-react-app my-app (내가 만들 앱 이름)

cd my-app (내가 만들 앱 이름)

npm start

2. Redux 설치

npm install --save redux react-redux

3. index.js 세팅

import React from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

import { Provider } from 'react-redux';

import App from './App';

import test_reducer from './App_reducer';    // redx 세팅 js 임포트

let store = createStore(board_reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

ReactDOM.render(

    <Provider store={store}>

        <App />

    </Provider>,

    document.getElementById('root')

);

4. App_reducer.js 생성 (데이터 입출력에 대한 기능 모음집)

// action type

const DATA_SAVE = 'SAVE';

const DATA_REMOVE = 'REMOVE';

const DATA_READ = 'ONE';

const DATA_LIST = 'LIST';

export const data_save = (data) => ({ 

                                type: DATA_SAVE,

                                data

                            });

                            

export const data_remove = (id) => ({ 

                                type: DATA_REMOVE,

                                id: id

                            });

export const data_read = (id) => ({ 

                                type: DATA_READ,

                                id: id

                            });

                            

export const data_list = () => ({ type: DATA_LIST });

const initialState = {

    maxNo: 3,

    datas: [

            {

                id: 1,

                descript: 'test1',               

                date: new Date()

            },

            {

                id: 2,

                descript: 'test2',                

                date: new Date()

            }    

    ],

    selectedData: {}

};

    

export default function data_reducer(state = initialState, action) {

    let datas = state.datas;

    

    switch(action.type) {

        case DATA_SAVE:

            let data = action.data;

            let maxNo = state.maxNo;

            if (!data.id) {    // new : Insert

                return {maxNo: maxNo+1, datas: datas.concat({...data, id: maxNo, date: new Date()}), selectedData: {} };

            } 

            return {...state, datas: datas.map(row => data.id === row.id ? {...data }: row), selectedData: {} };

        case DATA_REMOVE:

             return {...state, datas: datas.filter(row => row.id !== action.id), selectedData: {}};

        case DATA_READ:

             return {

                 ...state,

                 selectedData: datas.find(row => row.id === action.id)

            };

        default:

            return state;

    }

}

5. App.js 세팅 추가

import { connect } from 'react-redux';

6. 사용하는 컴포넌트 .js 세팅 추가

import { connect } from 'react-redux';

import { data_read, data_remove } from './App_reducer' //{ 사용할 액션 명 }

참고 : https://forest71.tistory.com/184?category=683254

-------------------- redux methods 넣기

https://velopert.com/3346

https://velopert.com/3352

끘!@$@#%ㄲ#$%ㄲ!@$#ㄸ!@$ ㅆㅂ...