なぜRedux thunk?
注:私は私の考えを整理し、いくつかのレコードを維持するためにこれを書いている.何かが間違っているか、より良い説明があるかどうか知らせてください.ありがとう!
あなたがアプリケーションであるならば、サーバーまたは使用API呼び出しと対話しません、あなたがAsyncアクションを必要としないので、あなたはredux thunkを必要としません.
どんなサーバー側(REST API)がかかわっているとき、問題は来ます.
なぜ問題?
Reduxのストアのみ同期をサポートします.下記のreduxドキュメントを見てください.
単独では、reduxストアは、async論理について何も知りません.それは同期的に行動を派遣する方法を知っている.(https://redux.js.org/tutorials/fundamentals/part-6-async-logic])
私はAPIの呼び出しを還元器で使用できますか?
いいえ減速剤は、純粋な機能です.副作用を起こしてはならず、状態を直接変異してはならない.とにかく、変異状態はああああです...反応で.畝
Reduxはあなたのアプリケーションの状態を更新するアクションと減速を使用します.これらの2つを使用することで、人々は簡単にどのようにデータの流れとあなたの状態が変化しているときに伝えることができます.
レデューサーは状態を最初にコピーし、状態で変更したい値を上書きします.
解決策はこちら!
単にRedux Thunkを言うのは、API呼び出しが必要であるとき、ユーザーが非同期機能を使うのを許すミドルウェアです.
文書が派遣行動がすぐに起こると言うように、しかし、Redux Thunkは遅れをするか、条件を適用することができます.
' action 'はオブジェクトであるので、' action creator 'はactionオブジェクトを返さなければなりません.Redux Thunkはアクションクリエーターに関数を返すことができます!今、我々は非同期作業を行うことができます.
Thunkがどのようにコードで働くかを見ましょう.
使い方
パッケージのインストール
私は、これがよく組織されていないということを知っています..
あなたがアプリケーションであるならば、サーバーまたは使用API呼び出しと対話しません、あなたがAsyncアクションを必要としないので、あなたはredux thunkを必要としません.
どんなサーバー側(REST API)がかかわっているとき、問題は来ます.
なぜ問題?
Reduxのストアのみ同期をサポートします.下記のreduxドキュメントを見てください.
単独では、reduxストアは、async論理について何も知りません.それは同期的に行動を派遣する方法を知っている.(https://redux.js.org/tutorials/fundamentals/part-6-async-logic])
私はAPIの呼び出しを還元器で使用できますか?
いいえ減速剤は、純粋な機能です.副作用を起こしてはならず、状態を直接変異してはならない.とにかく、変異状態はああああです...反応で.畝
Reduxはあなたのアプリケーションの状態を更新するアクションと減速を使用します.これらの2つを使用することで、人々は簡単にどのようにデータの流れとあなたの状態が変化しているときに伝えることができます.
レデューサーは状態を最初にコピーし、状態で変更したい値を上書きします.
return {
...state,
zip: M0R0O0
}
解決策はこちら!
単にRedux Thunkを言うのは、API呼び出しが必要であるとき、ユーザーが非同期機能を使うのを許すミドルウェアです.
文書が派遣行動がすぐに起こると言うように、しかし、Redux Thunkは遅れをするか、条件を適用することができます.
' action 'はオブジェクトであるので、' action creator 'はactionオブジェクトを返さなければなりません.Redux Thunkはアクションクリエーターに関数を返すことができます!今、我々は非同期作業を行うことができます.
Thunkがどのようにコードで働くかを見ましょう.
export const addToMyBar = (cocktail, id) => async (dispatch) => {
await fetch('http://localhost:5000/', {
})
.then((res)=>res.json())
.then((data)=> {
dispatch({type: 'ADD_TO_MY_BAR', data});
})
.catch(err => console.log(err))
}
使い方
パッケージのインストール
npm install --save redux-thunk
インポート.import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
例)export default () => {
const store = createStore(
combineReducers({
cocktails: cocktailsReducers,
myBar: myBarReducer,
}),
compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
return store;
};
ありがとう.私は、これがよく組織されていないということを知っています..
Reference
この問題について(なぜRedux thunk?), 我々は、より多くの情報をここで見つけました https://dev.to/jaebungs/why-redux-thunk-1dkaテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol