redux 2

redux를 사용하기 위해 설치할 것들

• redux: 리덕스 모듈
• react-redux: 리액트 컴포넌트에서 리덕스를 사용하기위한 유용한 도구들이 들어가있습니다.
• redux-actions: 이 라이브러리를 꼭 설치 할 필요는 없습니다. 단, 알아두면 굉장히 유용합니다.

yarn add redux react-redux redux-actions

 

1. 모듈 만들기

모듈이란 액션, 액션생성함수, 미들웨어, 초깃값, 리듀서함수가 들어있는 파일

 

1.1 액션타입 정의

// modules/counter.js
const INCREASE = 'counter/INCREASE';

1.2 액션 생성 함수 만들기

// modules/todos.js
export const changeInput = (input) => ({
	type: CHANGE_INPUT,
    input,
});

// modules/todos.js
import { createAction } from 'redux-actions';

export const changeInput = createAction(CHANGE_INPUT, input => input);

1.3 미들웨어 로직 작성하기

import * as api from '../lib/api';

export const getPost = (id) => async (dispatch) => {
	dispatch({ type: GET_POST });
    try {
    	const response = await api.getPost(id);
        dispatch({
        	type: GET_POST_SUCCESS,
            payload: response.data,
        });
    } catch(error) {
    	dispatch({
        	type: GET_POST_FAILURE,
            payload: error,
        });
        throw error;
    }
};

1.4 초기 state 및 리듀서 함수 만들기

function todos(state = initialState, action) {
	switch(action.type) {
    case CHANGE_INPUT:
    	return {
        	...state,
            input: action.input,
        };
    default:
    	return state;
    }
}

const todos = handleActions(
  {
  	[CHANGE_INPUT]: (state, { payload: input }) => ({ ...state, input }),
  },
  initialState,
);

export default todos;

2. 루트 리듀서 만들기

여러개로 나눠진 리듀서는 서브 리듀서, 이들을 합쳐놓은 리듀서를 루트 리듀서라고 합니다.

import { combineReducers } from 'redux';
import authentication from './authentication';
import user from './user';

const rootReducer = combineReducers({
    authentication,
    user,
});

export default rootReducer;

 

3. 스토어 만들기

src/index.js에 스토어 만들기

 

4. 프로젝트에 스토어 연동

provider 사용

 

5. 해당 컴포넌트에 스토어 연동

connect() : 호출 시 반환되는 값은 특정 컴포넌트에 설정된 props 를 전달해주는 함수입니다.

const Login() = () => {
	return <div>login</div>;
};

const mapStateToProps = (state) => ({
	number: state.counter.number,
});
const mapDispatchToProps = (dispatch) => ({
	increase: () => {
    	dispatch(increase());
    },
    decrease: () => {
    	dispatch(decrease());
    }
});

export default connect(
	mapStateToProps,
    mapDispatchToProps,
)(Login);

const Login() = () => {
	return <div>login</div>;
};

export default connect(
	(state) => ({
        number: state.counter.number,
    }),
    (dispatch) => ({
        increase: () => {
            dispatch(increase());
        },
        decrease: () => {
            dispatch(decrease());
        }
    }),
)(Login);

const Login() = () => {
	return <div>login</div>;
};

export default connect(
	(state) => ({
        number: state.counter.number,
    }),
    {
        increase,
        decrease,
    }
)(Login);

// hooks
import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { changeInput, } from '../modules/todos';

const Login = () => {
	const { input, todos } = useSelector(({ todos }) => ({
    	input: todos.input,
        todos: todos.todos,
    }));
    
    const dispatch = useDispatch();
    const onChangeInput = useCallback((input) => dispatch(changeInput(input)),
    [dispatch]);
};

export defulat React.memo(Login);