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: 現在の状態を取得する。