REACT Redux ②ReduxのAPI紹介

Redux の主要な API および概念について、以下に詳しく説明します。

1. createStore

createStore は、Redux ストアを作成するための関数です。3 つの引数を取ります：reducer、preloadedState、enhancer。preloadedState は初期状態を設定し、enhancer はストアを拡張するための関数です。

使用例:

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

const store = createStore(rootReducer);

引数:

・reducer：状態を更新するための関数。
・preloadedState：初期状態（オプション）。
・enhancer：ストアの機能を拡張するための関数（オプション）。

2. combineReducers

combineReducers は複数の reducer を組み合わせて、1 つのルート reducer を作成するためのヘルパー関数です。各サブ reducer がアプリケーション状態の一部を管理します。

使用例:

import { combineReducers } from 'redux';
import userReducer from './userReducer';
import postsReducer from './postsReducer';

const rootReducer = combineReducers({
  user: userReducer,
  posts: postsReducer
});

export default rootReducer;

3. applyMiddleware

applyMiddleware は、ストアの機能を拡張するための関数です。ミドルウェア（例えば redux-thunk や redux-saga）をストアに適用することができます。

使用例:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

4. bindActionCreators

bindActionCreators は、アクションクリエーター関数を dispatch 関数にバインドするためのヘルパー関数です。これにより、dispatch を明示的に呼び出さずにアクションをディスパッチできます。

使用例:

import { bindActionCreators } from 'redux';
import { addTodo, removeTodo } from './actions';

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ addTodo, removeTodo }, dispatch);
};

5. connect

connect は、React-Redux が提供する関数で、React コンポーネントを Redux ストアに接続するために使用します。2 つの引数、mapStateToProps と mapDispatchToProps を取ります。

使用例:

import { connect } from 'react-redux';
import { addTodo } from './actions';
import TodoList from './TodoList';

const mapStateToProps = (state) => ({
  todos: state.todos
});

const mapDispatchToProps = (dispatch) => ({
  addTodo: (todo) => dispatch(addTodo(todo))
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

6. Provider

Provider は React-Redux が提供するコンポーネントで、Redux ストアを React アプリケーションの全コンポーネントに提供します。

使用例:

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default Root;

7. dispatch

dispatch は、Redux ストアのメソッドで、アクションをディスパッチするために使用します。dispatch を呼び出すと、reducer が呼び出されて状態が更新されます。

使用例:

store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });

8. getState

getState は、Redux ストアのメソッドで、現在の状態を取得するために使用します。

使用例:

const currentState = store.getState();
console.log(currentState);

9. subscribe

subscribe は、Redux ストアのメソッドで、ストアの更新をリッスンするためのリスナーを追加します。

使用例:

const unsubscribe = store.subscribe(() => {
  console.log('State updated:', store.getState());
});

// 購読の解除
unsubscribe();

10. replaceReducer

replaceReducer は、Redux ストアのメソッドで、現在の reducer を動的に置き換えるために使用します。

使用例:

store.replaceReducer(newReducer);

11. compose

compose は、複数の関数を組み合わせて 1 つの関数にするための関数です。通常、applyMiddleware と一緒に使用され、ストアの機能を拡張します。

使用例:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

12. createSlice (Redux Toolkit)

createSlice は、Redux Toolkit が提供する API で、reducer とアクションクリエーターを簡単に作成できます。Redux スライスをより簡潔に定義することができます。

使用例:

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

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id);
    }
  }
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

13. createAsyncThunk (Redux Toolkit)

createAsyncThunk は、Redux Toolkit が提供する API で、非同期操作を処理します。非同期リクエストを簡単に扱い、pending、fulfilled、rejected の各状態に応じたアクションを自動的に生成します。

使用例:

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

export const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await fetch('/api/todos');
    return response.json();
  }
);

const todoSlice = createSlice({
  name: 'todos',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchTodos.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default todoSlice.reducer;

14. createReducer (Redux Toolkit)

createReducer は、Redux Toolkit が提供する API で、reducer の作成を簡素化します。immer ライブラリを使って、不変のデータ構造を扱うのが特徴です。

使用例:

import { createReducer } from '@reduxjs/toolkit';
import { addTodo, removeTodo } from './actions';

const initialState = [];

const todosReducer = createReducer(initialState, {
  [addTodo]: (state, action) => {
    state.push(action.payload);
  },
  [removeTodo]: (state, action) => {
    return state.filter(todo => todo.id !== action.payload.id);
  }
});

export default todosReducer;

createStore: Redux ストアを作成する。
combineReducers: 複数の reducer を組み合わせる。
applyMiddleware: ミドルウェアをストアに適用する。
bindActionCreators: アクションクリエーターを dispatch にバインドする。
connect: React コンポーネントを Redux ストアに接続する。
Provider: Redux ストアを React コンポーネントに提供する。
dispatch: アクションをディスパッチする。
getState: 現在の状態を取得する。