React--Reduxのstateデータを使用して問題を修正

Reactではstateでデータのメンテナンスを行い、データ共有時にステータスアップが必要ですが、データが多すぎる場合やプロジェクトが大きい場合、ステータスアップを使用するとデータが混乱し、メンテナンスが困難になります
react-reduxを使用して、reduxのドキュメントを使用してデータを維持することがほとんどになりました.http://cn.redux.js.org/
reduxドキュメントの内容は少し混乱していて、しばらく全部見ていません.reduxが取得したデータは関連資料を調べることで分かりました.しかし、stateのデータをどのように修正するかについては、ネット上で多くの説明を見て、最終的には理解していません.チュートリアルの言うとおりにしますが、依然として問題があり、どのように変更したのか説明していないような気がします.最終的にテストを通じて解決策を発見しました.記録して、後でこの問題に遭遇するのが便利です.
react-creat-appを用いて生成したプロジェクトのディレクトリに基づいて開発しました.プライマリフォルダはすべてsrcフォルダの下にありますreducerフォルダは主にredux関連ファイルの場所についてです

action.js:関連動作の定義

redux.js:アクショントリガを定義する方法

connect.js:接続定義の動作

まず、トリガの動作-action.jsを設定する必要があります.

//      
export const CURRENTPAGETITLE='currentPageTitle';
//    
export const action_pageTitle = { type: CURRENTPAGETITLE,text:'current page title' }

他のコンポーネントの導入を容易にするためにexportが必要です
次に、uiとの動作接続関数の設定–connect.jsを設定します.

/**
 *        ，      ，          
 * mapStateToProps       status     ，      status
 * @type {{mapStateToProps(*): *, mapDispatchToProps(*): *}}
 */
export const pageTitleMap = {
    mapStateToProps(state) {
        return {pageTitle: state.pageTitle}
    },
    mapDispatchToProps(dispatch) {
        return {
            getCurrentPageTitle: () => {
                dispatch(action_pageTitle)
            }
        }
    }
}

このオブジェクトは、主にページヘッダーのメンテナンスに使用するパラメータを設定します.
mapStateToProps:{pageTitle:state.pageTitle}を返すのは、メンテナンスが必要なstate属性がたくさんあるかもしれませんが、あるコンポーネントは主にタイトル設定に関する属性に注目しているので、state.pageTitleを取り出すだけでいいのですが、この状態値を属性mapDispatchToPropsに変換する:属性値変更後のトリガ関数getCurrentPageTitleを設定する
Reactはaction_に従いますPageTitle特定の処理関数を見つける
そして、動作の処理関数、すなわち状態の更新関数–redux.js

/**
 *        
 * @param state         ，         
 * @param action
 * @returns {({} & {pageTitle: string}){pageTitle: string}}
 */
const getCurrentPageTitle = (state = { pageTitle:'      ' }, action) => {
    const currentPageTitle=state.pageTitle;
    switch (action.type) {
        case CURRENTPAGETITLE:
            return  Object.assign({}, state, {
                pageTitle: currentPageTitle
            })
        default:
            return state
    }
}

ここではCURRENTPAGETITLEに基づいてトリガ関数の実際の処理関数を直接決定する.

/**
 *          
 *   reducer     pageTitle: getCurrentPageTitle
 * @type {Reducer}
 */
export const allReducer = combineReducers({
    pageTitle:getCurrentPageTitle
})

このセグメントコードは、redux.jsでデータを分割して維持する必要があるため(すなわち、stateの特定の属性のみを処理する、例えばgetCurrentPageTitleはpageTitleのみを維持する)、getCurrentPageTitleのようなreducerのメソッドが複数存在する可能性があり、combineReducersはすべてのreducerをマージするために使用され、呼び出されやすい
次に、app.jsを具体的に使用します.

import React from 'react'
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import {allReducer} from './reducer/reduxs'
/**
 *    reducer    store  
 * @type {any}
 */
const store = createStore(allReducer)

class App extends React.Component {
    render() {
        return (
            
                    

                        
                    
            

        );
    }
}

export default App;

ProviderによってstoreをProviderに包まれたすべてのサブコンポーネントに渡し、すべてのサブコンポーネントはpropsで属性値を取得し、更新方法を取得することができます.ソースコード、react-reduxのソースコードパッケージ部分を自分で表示する方法
History.jsx

import React from 'react'
import "../../view/history/history.css";
import {connect} from "react-redux";
import {pageTitleMap} from "../../reducer/connect";

class History extends React.Component {
    constructor(props) {
        super(props)
        //          render()     ，         
        let {getCurrentPageTitle,pageTitle}=props;
        //    mapStateToPropsh     ，        state
        pageTitle.pageTitle='    '
        //  state    
        getCurrentPageTitle();
    }
    render() {
        return (
            

            
        )
    }
}

/**
 *   connect         state  UI
 * connect     ，   
 *   let {getCurrentPageTitle,pageTitle}=props   getCurrentPageTitle，pageTitle   
 *        state          ，
 *         state                
 */
export default connect(pageTitleMap.mapStateToProps,pageTitleMap.mapDispatchToProps)(History);

注意:

//          render()     ，         
let {getCurrentPageTitle,pageTitle}=this.props;
//       ，        state
pageTitle.pageTitle='      '
//  state    
getCurrentPageTitle();

それ以外の場合は、次のエラーが発生します.

Maximum update depth exceeded. 
This can happen when a component repeatedly calls setState 
inside componentWillUpdate or componentDidUpdate. 
React limits the number of nested updates to prevent infinite loops.