さまざまなReact状態マネージャーの解釈と使用方法

'redux' から {createStore} をインポートします。
const ストア = createStore(fn)

定数状態 = store.getState()

定数アクション = {
    タイプ: 'ADD_TODO',
    ペイロード: 'Learc Redux' //ここでのペイロードはパラメータとして渡されるので、空白のままにしておくことができます}

ストア.ディスパッチ({
    タイプ: 'ADD_TODO'
})

const リデューサー = (状態 = {
  count: 10 // 状態のプロパティの初期値を設定します。状態マネージャは更新ごとにクリアされるため、ローカルから最後に保存された値を初期値として取得できます。}, action) => {
  スイッチ（アクションタイプ）{
    'REDUCE'の場合:
          // ここでは、アクションタイプの値を検索のキー値として使用していることがわかります。ディスパッチ時に、これらのキー値の判断に基づいて実行する操作を見つけることができます。 return { ...state, count: state.count - action.payload }
          //アクションの必要に応じて、元の状態を変更せずに元の状態に基づいた新しい状態オブジェクトを返します。
    ケース 'ADD':
      戻り値 { ...状態、カウント: state.count + action.payload }
   
    デフォルト：
      状態を返します。
  }
}
 
デフォルトのリデューサーをエクスポートする

糸不変 -S を追加します

import { Map } from 'immutable' //Map関数を導入する const user = (state = Map({ //Mapを使用して状態を深くコピーする
  ログイン: localStorage.getItem('isLogin') === 'true'、    
  トークン: localStorage.getItem('token') || ''、
  管理者名: localStorage.getItem('管理者名') || ''、
  役割: localStorage.getItem('role') * 1 || 1
})、アクション) => {
  スイッチ（アクションタイプ）{
    ケース 'CHANGE_LOGIN_STATE':
      return state.set('isLogin', action.payload) //設定モードでcase 'CHANGE_TOKEN'を記述します。
      state.set('token', action.payload) を返します。
    ケース 'CHANGE_ADMIN_NAME':
      state.set('adminname', action.payload) を返します。
    ケース 'CHANGE_ROLE':
      state.set('role', action.payload) を返します
    デフォルト：
      状態を返す
  }
}

デフォルトユーザーをエクスポート

状態 => {
    戻る {
        adminname: state.getIn(['user', 'adminname']), // get メソッドを使用して値を取得します。パラメータの形式は次のとおりです // 最初のパラメータの意味: 状態マネージャ内のユーザー // 2 番目のパラメータの意味: adminname という名前の状態/属性}
}

「redux」から createStore と combineReducers をインポートします。
// この combineReducers メソッドはモジュール開発の鍵です。モジュールのすべての状態マネージャーを結合するのに役立ちます。 import pro from './modules/pro'
'./modules/app' からアプリをインポートします
 
const Reducer = combineReducers({ //サブモジュールによって作成されたすべてのリデューサーをこのリデューサーに集中させる
  プロ、アプリ
})
 
const ストア = createStore(リデューサー)
 
デフォルトストアをエクスポート

// プロバイダーと接続を介してコンポーネント内の状態マネージャーを「リンク」できます。リンクが成功すると、状態マネージャー内の状態とメソッドを使用できます。// /src/xxx/index.jsx
'react-redux' から {connect} をインポートします
 
関数App（プロパティ）{
    ...
}
デフォルトの connect(mapStateToProps, mapDispatchToProps)(App) をエクスポートします。
     
// /index.js
'react-redux' から {Provider} をインポートします。
'./App.jsx' からアプリをインポートします
ストア './store/index.js' をインポートします
     
ReactDom.render (
    <React.StrictMode>
        <プロバイダーストア = {ストア}>
            <アプリ />
        </プロバイダー>
    </React.StrickMode>
）
 
//デコレータの高階関数 @connect @withRouter も使用できます
 
// 以前は、対応するデータは状態ツリーから取得され、 react-redux に付属する connect() メソッドを使用して props を通じてコン​​ポーネントに渡されていました。 class Home extends React.Component {
    //....
}
デフォルトの connect(state => ({todos: state.todos}))(Home) をエクスポートします。
 
//デコレータを使用すると、次のようになりますが、それほど複雑ではないようです @connect(state => ({ todos: state.todos }))
クラス Home は React.Component を拡張します {
    //....
}

const App = (props) => {
    // コンポーネントは、props を介して状態マネージャー内の状態 props.adminname に直接アクセスできます。
    小道具の数
    props.bannerList
    プロパティ
    ...
}
エクスポートデフォルト接続(
    // ここでは 2 つの関数が渡され、2 つの関数が返されることがわかります。state => {
        戻る {
            adminname: state.getIn(['user', 'adminname']), //これは状態を保存する方法です。countについては後で説明します: state.app.count, //パラメータはstateです。アプリ状態マネージャのcountプロパティをpropsのcountに渡します。
            バナーリスト: state.pro.bannerList、
        }
    },
    ディスパッチ => {
        戻る {
            ReduceFn () { // ここで、dispatch メソッドを含む ReduceFn を定義します。props の ReduceFn メソッドを使用して、'REDUCE' によって送信された情報を送信できます。dispatch({
                    タイプ: 'REDUCE'、
                    ペイロード: 5 //ペイロードはパラメータなので省略可能})
            }
        }
    }
）（アプリ）

//store.js に thunk を導入し、それを状態マネージャーにマウントします。import { createStore, combineReducers, applyMiddleware} from 'redux'
 
'redux-thunk' から thunk をインポートします
'./modules/app' からアプリをインポートします
'./modules/pro' から pro をインポートします
 
定数リデューサー = 結合リデューサー({
  アプリ、プロ
})
//applyMiddleware を通じて状態マネージャーに thunk をマウントします。const store = createStore(reducer, applyMiddleware(thunk))
 
デフォルトストアをエクスポート

// .../store/actionCreator/pro.js
 
// このファイルは非同期操作をトリガーするために特に使用されます // thunk モジュールが実行されると、actionCreator 関数にはデフォルトのパラメータとして dispatch が設定されます
// このディスパッチはリデューサーをトリガーするために使用できます
// 非同期をトリガーするときに、パラメータを渡す必要がある場合があります。この場合、関数内でactionCreator関数を返すことができます。const actions = {
  getBannerListAction (ディスパッチ) {
    フェッチ('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
      急送（{
        タイプ: 'CHANGE_BANNER_LIST',
        ペイロード: res.data
      })
    })
  },
  getProListAction (count) { //パラメータ付きで関数を返す。関数パラメータのデフォルトはdispatch
    カウント = カウント || 1
    関数を返す（ディスパッチ）{
      フェッチ('http://121.89.205.189/api/pro/list?count=' + カウント)
      .then(res => res.json())
      .then(res => {
        急送（{
          タイプ: 'CHANGE_PRO_LIST'、
          ペイロード: res.data
        })
      })
    }
  }
}
 
デフォルトのアクションをエクスポートする

'./store/actionCreator/pro' からアクションをインポートします
const App = (props) => {
    // props.reduceFn() は props から直接アクセスできます
    プロパティを追加します。
    props.getBannerList()
    props.getProList()
}
 
const mapStateToProps = (状態) => {
  戻る {
    カウント: state.app.count、
    バナーリスト: state.pro.bannerList、
    プロリスト: state.pro.proList
  }
}
 
const mapDispatchToProps = (ディスパッチ) => {
  戻る {
    ReduceFn () { //通常の方法で状態を変更するdispatch({       
        タイプ: 'REDUCE'、
        ペイロード: 5
      })
    },
    追加関数() {
      急送（{
        タイプ: 'ADD'、
        ペイロード: 5
      })
    },
    getBannerList () { // thunkメソッドdispatch(actions.getBannerListAction)を通じてステータスを変更します
    },
    プロリストを取得する() {
      ディスパッチ(actions.getProListAction(2))
    }
  }
}
 
デフォルトの connect(mapStateToProps, mapDispatchToProps)(App) をエクスポートします。

糸を redux-saga 不変 redux-immutable -S に追加します

'redux' から { createStore、combineReducers、applyMiddleware } をインポートします。
 
'redux-saga' から createSagaMiddleware をインポートします。
 
import mySaga from './mySaga' //非同期操作命令 import home from './modules/home'
'./modules/app' からアプリをインポートします
 
定数リデューサー = 結合リデューサー({
  アプリ、
  家
})
 
const sagaMiddleware = createSagaMiddleware() // saga ミドルウェアを生成 const store = createStore(reducer, applyMiddleware(sagaMiddleware))
//リンクを確立します //thunk と同様に、saga ミドルウェアを状態マネージャーにマウントし、saga メソッドを使用して状態を変更できます sagaMiddleware.run(mySaga)
//run: Send // これは、状態エクスポートのデフォルトストアを変更する関数としてカプセル化されたmySage関数です

'redux-saga/effects' から { call, put, takeLatest } をインポートします。
 
'../api/home' から { getBannerList, getProList } をインポートします。
 
// redux-saga ---> ジェネレータ関数と一緒に使用する必要があります function * getBannerListAction() {
  const res = yield call(getBannerList) //call--関数を呼び出す yield put({
    タイプ: 'CHANGE_BANNER_LIST',
    ペイロード: res.data
  })
}
関数 * getProListAction (アクション) {
  const res = yield call(getProList, action.payload)
  イールドプット({
    タイプ: 'CHANGE_PRO_LIST'、
    ペイロード: res.data
  })
}
 
関数 * mySaga() {
  takeLatest('REQUEST_BANNER_LIST', getBannerListAction) を取得します。
  takeLatest('REQUEST_PRO_LIST', getProListAction) を取得します。
}
 
デフォルトのエクスポート mySaga

// mysagaファイルでは、送信メソッドを定義します。import { takeLatest } from 'redux-saga/effects'
// takeLatest --- タスクを割り当てます。以下。キーを定義し、それにイベントを割り当てます。これらのイベントは、store.dispatch() 関数で使用される関数です。 * getProListAction (action){
  const res = yield call(getProList, action.payload)
  イールドプット({
    タイプ: 'CHANGE_PRO_LIST'、
    ペイロード: res.data
  })
}
関数 * mySaga() {
  takeLatest('REQUEST_PRO_LIST', getProListAction) を取得します。
}
 
// 将来的にステータスを変更したい場合、store.dispatch() を使用して変更する必要はありません。 // このファイルで定義されたキー値を使用して変更できます。 // コンポーネントの connect で次のようにカスタム関数を定義し、キー値に応じてここで変更メソッドの dispatch を直接呼び出します => {
    ディスパッチ({ タイプ: 'REQUEST_PRO_LIST'})
}
 
 
// 置く、呼び出す
// call ---> は呼び出すことを意味します // put ---> はプッシュすることを意味します。現在のアクションを次に実行されるアクション (キュー) にプッシュします。
 
yield put(アクション)
呼び出し(fn)