reduxを参考にしてreact状態管理方案を実現する

reactステータス管理スキームは多く、その中で最も簡単で最もよく使われるのはreduxです.
redux実装
reduxはステータス管理を行い、reducerとactionを利用して実現したstateの更新です.reduxを使用するには、いくつかのステップが必要です.

actions

Actions.jsの作成

// actions.js
export const SET_NAME = 'SET_NAME';
export const setName = (name) => {
    return {
        type: SET_NAME,
        name,
    }
}

 

reducer

reducers.jsの作成

// reducers.js
import {SET_NAME} from './actions';
const nameState = (state = '', action) => {
    switch(action.type) {
        case SET_NAME: {
            return action.name;
        }
        default: {
            return state;
        }
    }
}
export default nameState;

 

入口文

プロジェクトのエントリファイル

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './App'

const store = createStore(rootReducer)

render(
  
    
  ,
  document.getElementById('root')
)

 

Appコンポーネント

ビジネスコンポーネントコード

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {setName} from './actions';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setName('    ')
    }
    render() {
        return (
            

                {this.props.name}
                this.handleClick.bind(this)}>  name
            
        )
    }
}

const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        setName(name) {
            dispatch(setName(name));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

 
redux実装原理
reduxはステータス管理ツールであり、react-reduxによりreactコンポーネントがreduxと結合できるようにします.
Provider
Providerは、storeがすべてのサブコンポーネントによって共有されることを実現するために、最外層にいる必要がある高次コンポーネントです.
connect
Connectメソッドはreactコンポーネントをstoreに接続する方法です.Connectメソッドは、コンポーネントが使用するstateとトリガするアクションをreactコンポーネントのプロパティにマッピングします.
詳しくはreact-reduxドキュメントを参照してください
なぜreduxを使わないの?
reduxは、非常にシステム的で完全なstate管理スキームを提供しています.ドキュメントの一言では、次のようになります.
更新の発生時間を制限ことにより、Reduxはstateの変化を予測可能にしようとする.
彼は完全なので、比較的複雑で、より多くの構成が必要です.小さなプロジェクトではより簡便なステータス管理シナリオが欲しいのでreduxを捨てて他のシナリオを探します.
xudox実装

決定用法

完全例

原理概要

使用方法の決定
目的は最も簡単に使うことなので、私はこのように使うかもしれません.

//      
import React, { Component } from 'react';
import {connect} from 'xubox';

class AA extends Component {
    constructor(props) {
        super(props)
    }
    handleClick() {
        //      setState$  ，       state 
        this.props.setState$({
            name: '    '
        })
    }
    render() {
        return (
            

                {this.props.name}
                this.handleClick.bind(this)}>
            
        )
    }
}
//  redux  ，         state
const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};

//  redux    ，      mapStateToProps    
connect(mapStateToProps)(AA);

 
コードからreduxと似ているように見え、dispatchが緩和され、stateが直接変更されただけだ.他の設定は?初期state値を手動で設定する以外は、設定する必要はありません.
stateの初期値の設定

//     
import configureState from 'xubox';

configureState({
    name: localStorage.getItem('name') || '   '
});

 
完全な例

エントリファイル

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js'
import configure from 'xudux';
//   state
let state =  {
    name: '   ',
};

configure(state);
ReactDOM.render(
    
, document.getElementById('root'));

 

アセンブリ内

app.js

import React, { Component } from 'react';
import { connect } from 'xudux';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setState$({
            name: '    ',
        });
    }
    render() {
        return (
            

                {this.props.name}
                this.handleClick.bind(this)}>  name
            
        )
    }
}

const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};

export default connect(mapStateToProps)(App);

 
簡単な2部でステータス管理が完了しました.例は、コンポーネント内のstateレンダリング後のビューで、ビューがイベントを開始してstateを変更し、stateが開始ビューの再レンダリングを変更します.マルチコンポーネント間の通信は同じです.
原理の概要
xuduxの原理を簡単に紹介します.原理は簡単で、connectは高次コンポーネントを形成し、高次コンポーネントの内部でstateの変化を傍受し、stateが変化すると伝達されたreactコンポーネントpropsが変化し、再レンダリングされる.reduxもたぶんこのような論理です.
setState$メソッド:このメソッドは、xudux内部でstateを更新するメソッドです.任意のコンポーネントがこのメソッドを呼び出すと、xudux内のstate更新がトリガーされ、state更新はすべてのコンポーネントにプッシュされ、各コンポーネントは自身のstateが変更されたかどうかを判断し、reactコンポーネントが更新されるかどうかを決定します.
の最後の部分
興味のある方は試してみてください github