Daily Study Logging8 - react, redux

April 28, 2020

오늘의 작업은 directory 컴포넌트 내부의 state를 redux로 옮겨 놓는 작업이다.

이 state를 이 컴포넌트 안에서만 사용하면 이대로 두어도 아무런 문제가 없겠지만, 이 state를 다른 곳에서도 사용하고자 하기에 이를 redux로 옯겨 심어 보자

제일 먼저 해야 하는 것인 directory라는 리듀서를 만드는 것이다.

directory.js에 INITIALSTATE를 원래 디렉토리로 지정해 준다. 그리고 directoryReducer에 `INITAILSTATE`를 리턴 하도록 지정한다. 어떤 액션으로 이걸 바꾸거나 하지 않을 것이기 때문에 따로 액션을 지정하지 않고 default만을 놓는다.

const INITIAL_STATE = {
    sections: [
        {
          title: 'hats',
          imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
          id: 1,
          linkUrl: 'shop/jackets'
        },
        {
          title: 'jackets',
          imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
          id: 2,
          linkUrl: 'shop/jackets'
        },
        {
          title: 'sneakers',
          imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
          id: 3,
          linkUrl: 'shop/sneakers'
        },
        {
          title: 'womens',
          imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
          size: 'large',
          id: 4,
          linkUrl: 'shop/womens'
        },
        {
          title: 'mens',
          imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
          size: 'large',
          id: 5,
          linkUrl: 'shop/mens'
        }
      ]
    }

const directoryReducer = (state = INITIAL_STATE, action) => {
    switch ( action.type) {
        default:
            return state; 
    }
}

export default directoryReducer;

그리고 해당 state에도 reselect를 사용하여 다른 state가 이 state에 영향을 받지 않게 만든다.

import { createSelector } from 'reselect';

const selectDirectory = state => state.directory;

export const selectDirectorySections = createSelector(
    [selectDirectory],
    directory => directory.sections
)

그 뒤 rootReducer에 directory reducer를 추가해 준다.

const rootReducer = combineReducers({
    user: userReducer,
    cart: CartReducer
    cart: CartReducer,
    directory: directoryReducer
})

마지막으로 기존 directory 컴포넌트를 함수형 컴포넌트로 바꾸고 mapStateToProps를 통해서 section이라는 state를 selector를 통해 만들어주면 된다.

const Directory = ({sections}) => (
      <div className="directory-menu">
        {
          this.state.sections.map(({ id, ...sectionProps }) => {
          sections.map(({ id, ...sectionProps }) => {
            return (
            <MenuItems key={id} {...sectionProps} />
          )}
          )}
      </div>
    )
  }
}

export default Directory; 
const mapStateToProps = createStructuredSelector({
  sections: selectDirectorySections
})

export default connect(mapStateToProps)(Directory);

지금까지 해 왔던 것의 반복이지만, 새로운 state를 redux에 차근차근 넣어보니 지식이 정리가 더 잘 되는 느낌이다.

tags:

HAMA DEVELOP