React Hooks ✖️ Reduxを使ってみて 自分なりに詰まったところをまとめてみた

自分の作っているサービスで初めて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でアプリの雛形を作成

今回作るもの

• ボタンを押したら足したり引いたりできものを作ります

actionを作る

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を書くのは初めてなので、この書き方はおかしい！こっちの方がいい！みたいなご指摘がありましたらぜひコメント等いただければと思います。