react-redux

김_리트리버·2020년 8월 26일
0

redux

목록 보기
2/2

bindActionCreators


import AddItems from './AddItems';
import * as clothesActions from '../modules/wardrobe';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

const mapStateToProps = (state) => ({

    temporaryClothing: state.wardrobe.get('temporaryClothing'),

})

const mapDispatchToProps = (dispatch) => ({

    ClothesActions: bindActionCreators(clothesActions, dispatch),

})

// 기존
const AddItemsContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(AddItems)

// 변경 
// connect 함수가 내부적으로 bindActionCreators 작업을 대신해줌
const AddItemsContainer = connect(
    mapStateToProps,
    clothesActions
)(AddItems)

export default AddItemsContainer;

createAction


import {createAction} from 'redux-actions'

const CHANGE_INPUT = 'todos/CHANGE_INPUT';
const TOGGLE = 'todos/TOGGLE';
const REMOVE = 'todos/REMOVE';

// 원래 createAction(CHANGE_INPUT) 만 하면 
// presentational component 에서 dispatch 함수를 호출하며 
// arguments 에 전달한 값이 
// payload key 로 들어오게 된다. 
// 기존에는 payload.input 처럼 data 를 받아야 했다.  

// createAction 두번째 argument 에 payload 를 어떻게 받을건지 설정할 수 있다. 
// payload 로 바로 받을 수 있다. 

export const changeInput = createAction(CHANGE_INPUT,input=>input);
export const toggle = createAction(TOGGLE,id=>id);
export const remove = createAction(REMOVE,id=>id);


profile
web-developer

0개의 댓글