Reactでは、reduxパッケージを使用してデータウェアハウスを作成できます。
1.reduxパッケージをダウンロードします。
プロジェクトのルートディレクトリで、コマンドウィンドウを開き、次のコマンドを入力します。
yarn add redux2.倉庫を作成します。
srcディレクトリにstoreフォルダーを作成し、そのフォルダーにindex.jsを作成します。
import { createStore, combineReducers, applyMiddleware } from "redux";
import categoryReducer, { CategoryActions } from './category.js';
import productReducer, { ProductActions } from './product.js';
import cartReducer, { CartActions } from './cart.js';
// 先想好仓库结构，每个子仓库的结构。
// 总reducer
const reducer = combineReducers({
category: categoryReducer,
product: productReducer,
cart: cartReducer
});
const store = createStore(reducer);
export default store;
// 统一导入各自仓库中的ActionsCreate再统一导出。
export {
CategoryActions,
ProductActions,
CartActions
};サブウェアハウスコードは次のとおりです。
import http from '../utils/http';
// 子reducer
const initState = { listMain: [], listSub: [] };
const ACTIONS = {
MAIN: Symbol(),
SUB: Symbol()
};
// action creator作用是：让组件和仓库通信更优雅
export const CategoryActions = {
assignListMain: () => async ({ dispatch, getState }) => {
// getState调用可以拿到当前仓库的state
let result = await http('/category/list/0');
dispatch({ type: ACTIONS.MAIN, payload: result });
},
assignListSub: fid => async ({ dispatch, getState }) => {
let result = await http('/category/list/' + fid);
dispatch({ type: ACTIONS.MAIN, payload: result });
}
};
const reducer = function(state = initState, action) {
const { type, payload } = action;
switch(type) {
case ACTIONS.MAIN:
return Object.assign({}, state, { listMain: [] });
case ACTIONS.SUB:
return Object.assign({}, state, { listSub: [] });
default:
return state;
}
};
export default reducer;レデューサー機能の特徴：
1.前の戻りの結果は、次のレデューサー関数呼び出しの最初のパラメーターとして使用されます。
2.レデューサーウェアハウスオブジェクトを作成します。レデューサー関数を初めて呼び出すときに、デフォルト値を設定して、状態の初期状態を示すことができます。ただし、最初の呼び出しが行われると、2番目のパラメーターは存在しません。後続のレデューサー関数が呼び出されると、2番目のパラメーターが渡されます。レデューサー関数は、ウェアハウスと同等の内部アクションに従って新しい状態を返します。更新。
3.アクションオブジェクト：オブジェクトに文字列であるタイプ属性値がある場合。Reduxはそれがアクションオブジェクトであると考えています。
3.redux-thunkパッケージをダウンロードします。
倉庫のディスパッチ方法が機能をパラメータとして受け入れることができるようにするため。非同期で時間のかかるajaxコードをdispatchのパラメーター関数に配置します。redux-thunkパッケージをダウンロードする必要があります。
yarn add redux-thunk4. Redux-thunkパッケージの使用法：
ディスパッチ関数は、デフォルトではアクションオブジェクトのみを受信でき、関数をオブジェクトとして受信できないため、サードパーティのパッケージredux-thunkを使用して、関数を受信できるようにウェアハウスのディスパッチメソッドを拡張する必要があります。ディスパッチに関数を与えると、ディスパッチはすぐに実行され、その状態とディスパッチ関数自体を即時実行関数のパラメーターとして強制します。（この即時実行関数には、非同期で時間のかかるコードを含めることができます。これは、倉庫がajaxを送信するのと同じです）
使用後、倉庫にajaxを送信できます。
// index.js文件需要改变的内容
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));
// 子仓库发送ajax的代码
export const CategoryActions = {
assignListMain: () => async ({ dispatch, getState}) => {
// getState调用可以拿到当前仓库的state
let result = await http('/category/list/0');
dispatch({ type: ACTIONS.MAIN, payload: result });
}
}5.react-reduxパッケージをダウンロードします。
ルートインスタンスindex.jsにパッケージをインポートするために、reduxリポジトリをプロジェクトにリンクできます。
yarn add react-redux最初にreact-reduxからプロバイダーを分解してから、メインルートコンポーネントをプロバイダーでラップし、ラベルにウェアハウスストアをインポートする必要があります。
// 根实例index.js
// 在使用jsx对象时，必须引入react
// 根实例，将根组件App渲染到挂载点
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import { HashRouter } from 'react-router-dom';
import store from './store';
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={ store }>
<HashRouter>
<App />
</HashRouter>
</Provider>,
document.getElementById('root')
);6.倉庫はコンポーネントで使用されます。
任意のページレベルのコンポーネントで、ウェアハウス内のデータを取り出し、データを変更するようにウェアハウスに通知します。
import React, { Component } from 'react';
import { MiNav } from '../../components';
import { connect } from 'react-redux';
import { TestActions } from '../../store';
class Home extends Component {
render() {
return (
<div>这是主页{ this.props.a }
<MiNav />
<button onClick={() => this.props.change(123123)}>
test中的a值123123
</button>
</div>
);
}
}
const mapStateToProps = (state, props) => ({
a: state.test.a
});
const mapDispatchToProps = (dispatch, props) => ({
change: value => dispatch(TestActions.changeA(value))
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);このメソッドは、react-reduxパッケージのconnectメソッドを使用して、ウェアハウスとホームコンポーネントを接続する中間コンポーネントと呼ばれる高レベルのコンポーネントを生成します。
connectのパラメーターとして2つの関数が必要であり、2つの関数の戻り値はサービス（パッケージ）コンポーネントの小道具に割り当てられます。
最初のパラメーター：mapStateToProps（state、props）。主な機能は、提供されるコンポーネントのウェアハウス状態からのデータをマップすることです。この関数には2つのパラメーターがあります。
Stateはreduxウェアハウスの現在の状態であり、propsは親コンポーネントからこのコンポーネントに渡される値です。
2番目のパラメーター：mapDispatchToProps（dispatch、props）。主な機能は、ウェアハウス内のディスパッチメソッドを関数にカプセル化し、それをパッケージコンポーネントの小道具にマップして使用できるようにすることです。これにより、パッケージコンポーネントはreduxのデータを変更できます。
Dispatchはreduxのディスパッチ機能です。
上記は、Reactでウェアハウスを実装する方法です。ダウンロードする必要のあるパッケージはたくさんあります。ウェアハウスを使用する場合は、ウェアハウスの構造、保存および変更するデータ、およびデータの変更方法を事前に検討する必要があります。