자신이 만들고 있는 서비스로 처음으로 React Hooks, redux를 사용했기 때문에 자신이 막힌 곳을 정리해 보았습니다!
이 기사는 React Hooks, redux를 사용하는데 있어서, 자신이 막힌 곳에 대해서 쓰고 있습니다.
각각의 개별 설명에 대해서는 공식 문서 또는 다른 기사를 읽으십시오

참고로 한 기사

Redux Hooks의 편안함 dispatch & states
React Hooks에서 redux / react-redux로 한 일을 다양하게 시도하십시오.
🎉React 16.8 : 정식 버전이 된 React Hooks를 이제 굉장히

이 기사의 대상 독자

나 같은 React 초보자

React Hooks, redux 각각은 왠지 모르지만 함께 사용하는 방법을 모르는 분

내 개발 환경

macOS Mojave 10.14.6

Node.js 12.13.0

React 16.12.0

create-react-app로 앱의 병아리 만들기

이번에 만드는 것

버튼을 누르면 더하거나 당기거나 할 수있는 것을 만들 수 있습니다

액션 만들기

src/actions/action.js 에 action 을 정의합니다.
이번에는 더하거나 빼기만 하기 때문에 이 두 가지로 좋을 것입니다.

action.js

export const incrementAction = () => ({
    type: 'INCREMENT',
});

export const decrementAction = () => ({
    type: 'DECREMENT',
});

reducer 만들기

src/reducers/counterReducer.js 에 reducers 를 정의합니다.
이번에는 combineReducers를 사용하여 rootReducer로 각각의 reducer를 정리하는 형태로했습니다.

rootReducer.js

const rootReducer = combineReducers({
    counterReducer,
});

export default rootReducer

counterReducer.js

const initialState = {
    counter: 0,
};

export default function counterReducer(state = initialState, action) {
    switch (action.type) {
        case "INCREMENT":
            return {counter: state.counter + 1}
        case "DECREMENT":
            return {counter: state.counter - 1}
    }
    return {counter: state.counter}
}

이때 주의해야 하는 점이, return할 때 연상 배열의 형태로 하는 것입니다!
나는 state + 1 또는 state.counter + 1하고 있었기 때문에 잘 전달되지 않았습니다.

store 만들기

react-create-app 로 병아리를 만든 경우 src/index.js 가 있으므로 거기에 써 갑시다!
ReactDOM.render 파일에서 createStore에 rootReducer를 전달합니다.
작성한 store를 Provider에 건네주어 아래의 컴퍼넌트에서도 사용할 수 있도록 합니다.

index.js

const store = createStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,

    document.getElementById('root')
);

전화

index.js 그리고 호출하고 있는 컴퍼넌트로 위에서 정의한 것을 호출해 갑니다.react-create-app 로 병아리를 만든 경우 src/App.js 입니다!

App.js

export default function App() {
    const dispatch = useDispatch() 
    const counter = useSelector(state => state.counterReducer.counter);// 使用するreducerを引数に渡す。
    return (
        <div className="App">
            <p> count: {counter} </p>
            <button onClick={() => dispatch(incrementAction())}>たす</button>
            <button onClick={() => dispatch(decrementAction())}>ひく</button>
        </div>
    );
}

이때 주의해야 하는 점이, useSelector에 인수를 건네줄 때 제대로 reducer를 지정해 건네주는 것입니다!
reducer를 root로 정리하고 있으므로 useSelector(state => state.counter) 와 같이 해 버리면 당연합니다만 undefind
이상으로 완료입니다, 페이지에 액세스 해 봅시다.

요약

이번에 처음으로 React Hooks를 사용해 보았습니다만 매우 편리하네요!
아직 나온 지 얼마 안된 자료도 별로 없었기 때문에, 나와 같은 초초자라도 알 수 있도록(듯이) 내가 막히거나 한 곳을 정중하게 써 보았습니다.

React를 쓰는 것은 처음이므로이 쓰기는 이상합니다! 이쪽이 좋다! 같은 지적이 있으면 꼭 코멘트 등 주시면 좋겠습니다.