私は、データを表示するテーブルコンポーネントと、ドロップダウンリストを介してデータをフィルタするフィルタコンポーネントを含むreact-reduxアプリケーションを持っています。ドロップダウンを使用して選択するたびにバックエンドからデータを受け取れるようにアプリを変更する必要があります。私は以下を持っています:コンポーネント、レデューサー、アクションクリエータ、mapStateToProps、mapDispatchToProps。バックエンドと呼ぶべきですか?React Reduxからバックエンドを呼び出す
0
A
答えて
2
あなたの行動でAPIクライアントを公開するためにredux midlewareを使用することができます。
マイReduxのミドルウェア:アクションで
export default function clientMiddleware(client) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
const { promise, types, ...rest } = action; // eslint-disable-line no-redeclare
if (!promise) {
return next(action);
}
const [REQUEST, SUCCESS, FAILURE] = types;
next({ ...rest, type: REQUEST });
const { auth } = getState();
client.setJwtToken(auth.token || null);
const actionPromise = promise(client, dispatch);
actionPromise.then(
result => next({ ...rest, result, type: SUCCESS }),
error => next({ ...rest, error, type: FAILURE })
).catch((error) => {
console.error('MIDDLEWARE ERROR:', error);
next({ ...rest, error, type: FAILURE });
});
return actionPromise;
};
}
その使用は:
const SAVE = 'redux-example/widgets/SAVE';
const SAVE_SUCCESS = 'redux-example/widgets/SAVE_SUCCESS';
const SAVE_FAIL = 'redux-example/widgets/SAVE_FAIL';
export function save(widget) {
return {
types: [SAVE, SAVE_SUCCESS, SAVE_FAIL],
id: widget.id, // additionnal data for reducer
promise: client => client.post('/widget/update', {
data: widget
})
};
}
// in reducer:
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case SAVE:
return state;
case SAVE_SUCCESS:
// you can use action.result and action.id here
return state;
case SAVE_FAIL:
// and you can use action.error and action.id here
return state;
default:
return state;
}
}
最後に、あなたはmapDispatchToPropsを使用してコンポーネントにこのアクションを渡す必要があります。私はダン・アブラモフ監督の例に基づいてReduxの-API-ミドルウェアhttps://github.com/agraboso/redux-api-middleware を使用し、あなたに
0
を助けていると期待して
。
関連する問題
- 1. Reactとreduxで別のレデューサーからアクションを呼び出す
- 2. react-reduxで親メソッドを子から呼び出す方法
- 3. リーフレットマップからreduxアクションを呼び出す
- 4. jspからReact JSを呼び出す
- 5. reduxアクションからapolloクライアントクエリを呼び出す方法
- 6. React/Redux:状態が2回呼び出されましたか?
- 7. redux-formでparentからhandleSubmitを呼び出す方法
- 8. React Native:Component内のRedux getState()を呼び出す
- 9. 非同期呼び出しでクエリパラメータにアクセスする(react redux)
- 10. API呼び出しによるreact reduxを使用したファイルアップロード
- 11. ReduxでダムコンポーネントからAPIコールを呼び出す
- 12. Redux - レデューサーが呼び出されない
- 13. Meteorのバックエンドから{{> loginButtons}}機能を呼び出す
- 14. React Redux mapStateToPropsは2回目の呼び出しでデータをロードします
- 15. React Nativeからバイナリを呼び出しますか?
- 16. APIを呼び出してreact/redux内の他の子から1人の子供を更新する方法
- 17. AjaxからReactからPHPファイルへの呼び出し
- 18. react-router RouteのonChangeからディスパッチを呼び出す方法は?
- 19. React-NativeコードからAndroidのアクティビティを呼び出す
- 20. React VideoJSコンポーネントのメソッドを別のコンポーネントから呼び出す
- 21. React:内部のレンダリング関数から関数を呼び出す
- 22. JavaScriptメソッドをJava React Nativeから呼び出す
- 23. React Nativeの親コンポーネントから子関数を呼び出す
- 24. React native JsコードからAndroidネイティブUIコンポーネントメソッドを呼び出す
- 25. react:親コンポーネントから子コンポーネントのメソッドを呼び出す
- 26. React Nativeで別のクラスからレンダリングを呼び出す
- 27. React/ES6 - >他のコンポーネントからReactコンポーネントクラスメソッドを呼び出す方法は?
- 28. React、Redux、およびImmutable
- 29. ルートコンポーネントからのReact/Reduxディスパッチアクション?
- 30. mapstatetopropsから呼び出すときにRedux Selectorが起動しない
「アクション作成者」または「コンポーネント」自体から呼び出すこともできますし、他の方法や場所でも構いませんが、** reducers' **、 'mapStateToProps 'または' mapDispatchToProps' –
redux-thunkライブラリを見てください。それが何をするのかは、関数を返すアクションクリエーターを書くことができ、それらのアクションクリエーターを呼び出すときに関数を呼び出して、reduxディスパッチメソッドも渡します。 これで、mapDispatchToPropsミドルウェアを使用して、これらのアクションクリエータを小道具を介して渡すことができます。また、これらのアクションクリエータはコンポーネントから呼び出すことができます。その後、バックエンドへのリクエストのコールバックでディスパッチできる検索イベントのアクションを作成できます。 Reducerは、そのアクションからのデータをストアに格納し、小道具の更新時にコンポーネント内のデータを更新します。 –