reactグローバルステータス管理最適化

reduxとreact-reduxを組み合わせてインストール

npm install redux
npm install react-redux

indexでjsでProviderを導入し、storeがreact-reduxで提供するproviderプロバイダを介してルート要素のコンテキストにグローバルステータスオブジェクトをマウントします.

import {
     Provider} from 'react-redux'
import store from './ReactRedux/store/store'
ReactDOM.render(<Provider store={
     store}><App /></Provider>, 
document.getElementById('root'));

actionType.jsはステータス値を格納し、他の場所で変数で参照してプロジェクトの複雑なステータス値が多い場合に混乱を避けることができます.

export const CHANGE_NAME = 'CHANGE_NAME'
export const CHANGE_AGE = 'CHANGE_AGE'

reducer.jsグローバルステータス値が複雑な場合にjsファイルを新規作成して保存できます

import {
     CHANGE_NAME,CHANGE_AGE} from './actionType'

let state={
     
    name:'   ',
    age:16
}

export default (prevState=state,actions)=>{
     
    let newData = JSON.parse(JSON.stringify(prevState))
    /*
    1.                    ，             
    2.           ，     
    */
    let {
     type,payload} = actions
    
    switch (type) {
     
        case CHANGE_NAME:
            newData.name = payload
            break;
        case CHANGE_AGE:
            newData.age = payload
            break;
        default:
            break;
    }

    return newData
}

actionCreator.jsはactionを送信せず,単純にactionを作成するために用いられる.

[CHANGE_NAME](){
     
        let action = {
     
            type:CHANGE_NAME,
            payload:'   '
        }
        return action
    },
    [CHANGE_AGE](){
     
        let action = {
     
            type:CHANGE_AGE,
            payload:500
        }
        return action
    }

コンポーネントではグローバルステータス値を使用し、react-reduxで提供されるconnectによってコンポーネントとのコンテキストからstoreオブジェクトを取得し、高次コンポーネントによって取得したstoreをターゲットコンポーネントのpropsに渡す

import React,{
     Component} from 'react'
import {
     connect} from 'react-redux'
import ActionCreator from './store/actionCreator'
import {
     bindActionCreators} from 'redux'

class Son2 extends Component{
     
    render(){
     
        let {
     name,age,CHANGE_AGE} = this.props
        return(
            <div>
                <h3>son2</h3>
               {
     name}{
     age}
               <button onClick={
     CHANGE_AGE}>changeage</button>
            </div>
        )
    }
}


export default connect(state=>state,
dispatch=>bindActionCreators(ActionCreator,dispatch))(Son2)

connectの本質は1つの方法が1つの高次のコンポーネントのパラメータ1 mapStateToPropsを返して全体の状態の値をpropsの中のパラメータ2 mapDispatchToPropsのマッピングの方法をマッピングしてpropsの中に着いて、デフォルトのマッピングdispatchを書かないで、returnはどんなmapStateToPropsの本質をマッピングするのも1つの関数です

この関数は、パラメータ

としてグローバル状態値を受信する.

この関数が返すデータはコンポーネントのpropsにマッピングされます

let mapStateToProps = (state)=>{
     
    console.log(state)
    console.log('mapStateToProps')
    return state
}

mapDisPatchToPropsの本質も関数です

は、パラメータ

としてdispatchを接続することができる.

returnのオブジェクトもpropsにマップされますmapDispatchToProps空であればdispathをpropsにマップします空でなければreturnのオブジェクトをpropsにマップします

let mapDispatchToProps = (dispatch) =>{
     
    // ActionCreator         props   
    //              dispatch
    return bindActionCreators(ActionCreator,dispatch)
}

投げ出すときは

export default connect(state=>state,
dispatch=>bindActionCreators(ActionCreator,dispatch))(   )

redux+react-reduxの非同期問題は単独で使用する場合、非同期操作はActionCreatorに統一的に配置できるが、使用後、ActionCreatorのメソッド戻り値はオブジェクト解決方法applyMiddleWare+redux-thunkが非同期を解決するミドルウェアである必要がある
store.js

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

export default createStore(reducer,applyMiddleware(thunk))

ActionCreator.jsに非同期を格納

[CHANGE_NAME](){
     
        return (dispatch)=>{
     
            setTimeout(()=>{
     
                let action = {
     
                    type:CHANGE_NAME,
                    payload:'   '
                }
                dispatch(action)
            },1000)
        }
    }

余談、setStateの特性

constructor(){
     
    super()
    this.state = {
     
      num:1
    }
  }
componentDidMount(){
     
    console.log(this.state.num)//1
    this.setState({
     num:2})
    console.log(this.state.num)//1
    setTimeout(()=>{
     
      this.setState({
     num:3})
      console.log(this.state.num)//3
      this.setState({
     num:4})
      console.log(this.state.num)//4
    },0)
    console.log(this.state.num)//1
  }

setStateは非同期ですがsetStateが非同期に置かれると同期になります