Redux

JavaScriptアプリケーションのステータスの効率的な管理を支援するライブラリ

主な概念

✔ Action

ステータスが変化したときに参照されるオブジェクト

{
  type: "ADD_TODO",
  payload: {
    id: 0,
    text: "redux"
  }
}

動作をtypeで区切って、有効負荷の値で状態を更新します.

✔ Action Creator

アクションオブジェクトを作成するhelper関数

const createAction = (type, payload) => ({ type, payload });

✔ Reducer

前の状態と動作を入力することで変化を引き起こす関数.
純真を授けなければならない.(戻り値はパラメータ値のみに依存し、常に同じ結果が出力されます)
状態の変化はReducerでしか起こりません

✔ Store

コンポーネント外部のStateリポジトリ

✔ Dispatch

Reduser関数を呼び出し、動作に応じて状態を変更します.

変化の傾向

注)))
https://velopert.com/3528

実際のプロジェクトに適用

ショップの作成

src/store/store.js

import { compose, createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';

import { rootReducer } from './root-reducer';

const middleWare = [logger];

const composedEnhancers=compose(applyMiddleware(...middleWare));

export const store = createStore(rootReducer,undefined,composedEnhancers);

ReducerをrootReducerとmiddleWareに組み合わせる

スーパーユーザーの作成

src/store/root-reducer.js

import { combineReducers } from "redux";

import { userReducer } from "../contexts/user.context";

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

ユーザー・レプリカの作成

src/sotre/user/user-reducer.js

import { USER_ACTION_TYPES } from './user.type';

const INITIAL_STATE = {
    currentUser: null,
};

export const userReducer = (state=INITIAL_STATE, action) => {
	const { type, payload } = action;

	switch (type) {
		case USER_ACTION_TYPES.SET_CURRENT_USER:
			return {
				...state,
				currentUser: payload,
			};

		default:
			return state;
	}
};

以前Contextで使用していたreduceを使用します.

アプリケーションストア

index.js

import { Provider } from 'react-redux';
import { store } from './store/store';

ReactDOM.render(
	<React.StrictMode>
		<Provider store={store}>
			<BrowserRouter>
				<UserProvider>
					<CategoriesProvider>
						<CartProvider>
							<App />
						</CartProvider>
					</CategoriesProvider>
				</UserProvider>
			</BrowserRouter>
		</Provider>
	</React.StrictMode>,
	document.getElementById('root')

Providerコンポーネントにstoreを入れます.

アクションの作成

src/store/user/user.actions.js

import { USER_ACTION_TYPES } from './user.type';

export const setCurrentUser = (user) => ({
	type: USER_ACTION_TYPES.SET_CURRENT_USER,
	payload: user,
});

実際、これはstateをグローバルに変更する際に使用される動作です.
stateはこの動作でのみ変更できます.

転送アクション(fire)

App.js

import { useDispatch } from 'react-redux';
import { setCurrentUser } from './store/user/user.action';

const App = () => {
	const dispatch=useDispatch();

	useEffect(() => {
		const unsubscribe = onAuthStateChangedListener((user) => {
			if (user) {
				createUserDocumentFromAuth(user);
			}
			dispatch(setCurrentUser(user));
		});
		return unsubscribe;
	}, []);
	
	return (...)
}

react-reduxのuseDispatch hookを使用して、定義したactionをreducerに渡してステータスを変更します.

ショップステータスのインポート

Navigation.jsx

import { useSelector } from 'react-redux';
import { selectCurrentUser } from '../../store/user/user.selector';

const Navigation = () => {
	const currentUser = useSelector(selectCurrentUser);

	return (...)
}

//user.selector.js
export const selectCurrentUser = (state) => state.user.currentUser;

react-redoxのuserSelector hookはコールバック関数を使用してstate内の特定のデータを返します.