【React-Redux】ReduxToolkitでDucksパターン構築編 [初心者入門2日目]

$ npm install --save @reduxjs/toolkit

import { createSlice } from '@reduxjs/toolkit';

// Stateの初期状態
const initialState = {
  value: 0
};

const counter = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: state => ({ value: state.value + 1 }),
    decrement: state => ({ value: state.value - 1 }),
  }
});

// 個別でも使えるようにActionCreatorsをエクスポートしておく
export const { increment, decrement } = counter.actions;

export default counter;

import * as types from '../constants/ActionTypes';

const initialState = {
  value: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case types.INCREMENT:
      return { value: state.value + 1 };
    case types.DECREMENT:
      return { value: state.value - 1 };
    default:
      return state;
  }
};

export default counter;

import { combineReducers } from 'redux';

import counter from './counter';

const rootReducer = () => combineReducers({
  counter,
});

export default rootReducer;

import { createStore } from 'redux';
import rootReducer from '../reducers';

const configureStore = () => {
  const store = createStore(
    rootReducer(),
  );

  return store;
};

export default configureStore;

import { combineReducers, configureStore } from '@reduxjs/toolkit';

import counter from '../slices/counter';

const rootReducer = combineReducers({
  counter: counter.reducer,
});

const store = configureStore({
  reducer: rootReducer,
});

export default store;

import React, { useMemo } from 'react';
import { bindActionCreators } from 'redux';
import { useDispatch, useSelector } from 'react-redux';

import Header from '../components/header/HeaderComponent';
import Counter from '../components/counter/CounterComponent';
// import CounterActions from '../actions/counter';
import { increment, decrement } from '../slices/counter';

const useActions = (actions, deps) => {
  const dispatch = useDispatch();
  return useMemo(
    () => {
      if (Array.isArray(actions)) {
        return actions.map(a => bindActionCreators(a, dispatch))
      }
      return bindActionCreators(actions, dispatch)
    },
    deps ? [dispatch, ...deps] : [dispatch]
  )
};

const AppContainer = (props) => {
  // const counterActions = useActions(CounterActions);
  const counterActions = useActions({ increment, decrement });
  const counter = useSelector(state => state.counter);

  const _counterProps = { counter, counterActions, ...props };
  return (
    <div>
      <Header />
      <Counter {..._counterProps} />
    </div>
  );
};

export default AppContainer;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";

// import configureStore from '../stores/configureStore'; ← いらない
import stores from '../stores'; ← 新しく作ったstores/index.jsx
import App from '../container/AppContainer';

// const stores = configureStore(); ← いらない

const render = () => {
  ReactDOM.render(
    <Provider store={stores}>
      <div>
        <App />
      </div>
    </Provider>,
    document.getElementById('root'),
  );
};

render();