[리액트] 리덕스 코드 적용

1. 리듀서 작성

1. 액션 정의

export function setUserInfo(email,profile)
{
    return{
        type: 'SET_USER_INFO',
        email,profile
    }
}

2. 초기 상태 변수 정의

const initialState={
    user_email:0,
    user_profile:0,
}

3. 리듀서 정의

export default function reducer(state=initialState, action)
{
    switch (action.type)
    {
        case 'SET_USER_INFO':
            return{
                ...state,
                user_email:action.email,
                user_profile:action.profile
            }
    }
}

2. 스토어 생성, Provider 연동

index.js에서 관리한다.

1. 스토어 생성
   createStore 함수 명이 deprecated 되었는데, 사용법을 찾기 귀찮아서 일단 쓰는 중.

import {createStore} from 'redux'
const store=createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

2. Provider와 index.js 연결
   App 을 Provider로 감싸준다.

import {Provider} from 'react-redux';
  <Provider store={store}>
    <App />
    </Provider>

3. 컴포넌트의 subscribe

1. state값, dispatch할 리듀서 정의

import {setUserInfo } from "../reducer/user_reducer";
const mapStateToProps = state => ({
    user_email: state.user_email,
    user_profile: state.user_profile,
  });
  
const mapDispatchToProps = {
    setUserInfo
  };

2. 컴포넌트와 연동

import store from '../../src/index';
export default  connect(mapStateToProps,mapDispatchToProps)(MainComponent)

4. 스토어 접근

1. 상태변수 값 가져오기

store.getState()['user_email']

2. 상태변수 값 바꾸기

 store.dispatch(setUserInfo())