redux) ui와 합치기

1. ui와 연결하기 위해서 react-redux의 connect로 감싸줌. - state와 dispatch 연결

mapStateToProps : store에 있는 state를 props로 연동해준다.

mapDispatchToProps: dispatch  함수를 props로 연동해준다.

 

2. bindActionCreators로 dispatch 함수 리턴하는 부분을 편리하게 써줄 수도 있지만 최종판은 아래와 같다

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

 

리덕스 더 편하게 사용하기

1. redux-actions

action creators 의 변화

// before
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// after
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

 

리듀서의 변화

// before
function test(state = initialState, action) {
    switch (action.type) {
    case INCREASE:
        return {
            number: state.number + 1,
        };
    case DECREASE:
        return {
            number: state.number - 1,
        };
    default:
        return state;
    }
}

// after
const test = handleActions(
    {
        [INCREASE]: (state, action) => ({ number: state.number + 1 }),
        [DECREASE]: (state, action) => ({ number: state.number - 1 }),
    }, initialState,
);

 

hooks를 이용하여 연결하기

1. useSelector

mapStateToProps => useSelector

const number = useSelector(state => state.test.number);

 

2. useDispatch

mapDispatchToProps => useDispatch

const dispatch = useDispatch();

const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);