「 React 」redux

概要
1)reduxは独立して状態管理に特化したJSライブラリ(reactプラグインライブラリではない)2)react,angular,vueなどのプロジェクトで使用できるが、これまでreactと基本的に協力して使用されてきた3)の役割:集中的な管理reactアプリケーションで複数のコンポーネントが共有されている状態Tip:redux , ,
キーモジュール

Store

状態の主要部分を保存し、共有した状態データをそのオブジェクトに保存します.

Action Creators

ファクトリ関数は、主にactionオブジェクトを生成する、更新された状態データを転送するために用いる.

Reducers

アクションオブジェクトを受信、前の状態とアクション中の新しい状態を操作し、新しい結果をstoreに返す.
キー関数

store.createStore()

storeオブジェクトを作成し、パラメータをreducersに転送してバインドします.

store.dispatch()

actionオブジェクトを配布する、reducersに転送し、状態の更新を行う.

store.subscribe()

ステータスが変更されると自動的にリスニングメソッドが呼び出されます(一般的にはメソッドを再レンダリングするために使用されます).
使用例
1.ダウンロードインストール

//       yarn,        
yarn add redux  react-redux  redux-thunk

2.ファイルディレクトリの作成
3.各部内容
store.js

import { createStore,applyMiddleware } from 'redux'
import reducer from './reducer'   //  reducer    
import thunk from 'redux-thunk'    //          

export default createStore(reducer,applyMiddleware(thunk)); //   store  

action-creator.js

import { INCREASE, DECREASE } from './action-type'  //        

//      ,  action  ,type   ,data      
export const incresement = (data) => ({ type:INCREASE,data:data})  

export const decresement = (data) =>({type:DECREASE,data:data})

//      ,                 
export const incresementAsync = (data) => {
    return (dispatch) => {
      setTimeout(()=>{
        dispatch(incresement(data))
      },1000)
    }
    
}

reducer.js

import {INCREASE,DECREASE} from './action-type'

//  dispatch    ,               ,     .
//previousState      ,action        
export default function number(previousState = 0,action) {
    switch(action.type){
        case INCREASE:
        return previousState + action.data;
        case DECREASE:
        return previousState - action.data;
        default:
        return previousState;
    }
}

action-type.js

//         
export const INCREASE = 'INCREASE';

export const DECREASE = 'DECREASE';

App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { incresement, decresement,incresementAsync } from './redux/action-creator'
class App extends Component {

//       
  increase = () => {
    this.props.incresement(1)
  }

  decrease = () => {
    this.props.decresement(1)
  }

  increaseAsync = () => {
    this.props.incresementAsync(1)
  }

  render() {
    return (
      

      //     
        
click {this.props.number} times
        +++
        ---
           
      
    )
  }
}
//     ,       .
//   react-redux,   action   dispatch           ,          .
//             ,     props   .
export default connect(
  (state) => ({ number: state }),
  { incresement, decresement,incresementAsync }
)(App)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './redux/store'
import App from './App';

//  Provider  ,     subscribe()     .
ReactDOM.render(, document.getElementById('root'));

react-redux
reduxがreactで使用するライブラリを簡略化するために使用される.原生reduxになりますgetState()は、actionオブジェクトの作成、dispatchなどの方法でカプセル化する.以上のようなコードの簡略化方式を提供する.
redux-thunk
非同期操作の解析を支援するために使用する.storeオブジェクトを作成する際にミドルウェアパッケージで第2のパラメータとして伝達するだけでよい.
拡張デバッグツール
redux-devtools-extension.
Googleストアにこのプラグインをインストールし、storeオブジェクトを作成するときに

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

まとめ
reduxは複雑なプロジェクトで使用するのに適している.共有する必要がある状態データが複数保存されており、プロジェクト全体で状態データの更新や取得が容易である.
いくつかの階層が比較的に多く、あるいは比較的多段階の兄弟コンポーネントを越えて互いに通信する複雑な過程を回避した.