react專案成型的個人心得

此文是我在react專案搭建後對整個流程的一些環節進行整理和梳理，如有錯誤還請指正。

一般目錄結構搭建好後，我們會首先在src中開始工作，因為大多數**都是在src中完成的。

這裡要說乙個react專案的構建思想：

1 準備工作比較全面的目錄結構如下：

關於入口檔案以下是基礎和全面版：

2 建立主元件3拆分元件4.動態化修改這一步驟是非常關鍵的，直接決定做好的功能是否可用。首先將靜態的資料提取出來，需要儲存的在本頁面的state中儲存好，如果有多個頁面需要使用的資料或者互動的資料，這時就要引用redux，集中管理公用的狀態。

下面我們引入乙個業務場景，加入註冊頁面需要向伺服器傳送ajax請求。下面是圍繞著redux的一套比較固定的邏輯。

1.定義介面和方法

因為要傳送ajax請求，首先在api中定義好axios方法和針對於不同業務的請求函式。

注意：此處prefix為空，因為在開發環境中解決跨域問題可以使用proxy方法。

//定義註冊的請求
export const reqregister = data => ajax(`$/register`, data, 'post');

2.完成store

import thunk from 'redux-thunk';

import from 'redux-devtools-extension';

//引入reducers函式

import reducers from './reducers';

3.actions和action-type

actions內部是建立action物件的工廠函式，actions內會定義一些同步函式，為了方便儲存和reducers復用會儲存到actions-types中。當涉及到非同步函式時，我們會首先定義乙個同步函式，然後在非同步函式內呼叫同步函式。由於傳送ajax請求是非同步函式，所以採用如下寫法。

//定義同步action creator
export const authsuccess = data => ();
export const autherror = data => ();

需要定義兩個同步方法，因為註冊存在成功和失敗兩種情況，返回值不相同。

//定義非同步action creator
export const register = () => );
} else if (!password) );
} else if (password !== repassword) );
}  return dispatch => )
.then(() =>  else ));}})
.catch(err => ));
})}}

4.reducers

這裡是真正更新store中狀態的地方。這裡定義了公用狀態的初始化值和更新狀態的方法。定義方法時需要傳兩個引數，乙個是previousstate，另乙個是action,通過對action.type的判斷，就知道ajax請求失敗了還是成功了，從而通過return不同的值來控制store中狀態的不同。

//初始化狀態的值
const inituserstate = ;

function user(previousstate = inituserstate, action) ;
case auth_error :
return ;
case update_user_info :
return ;
case reset_user_info :
return 
default :
return previousstate;
}}

當有多個函式時，可以使用合併reducers函式的方式

//預設暴露合併後的reducers函式
// , yyy: function yyy() {}}
export default combinereducers()

至此「redux無腦一頓操作』』完成了請求方法的定義。現在只需要在註冊頁面中呼叫就好了，可是現在問題來了，這個方法怎麼從actions傳過去。

此處就用到了容器元件

import  from 'react-redux';
//引入ui元件
import register from '../components/register';
//引入action creators
import  from '../redux/actions';
//暴露容器元件
export default connect(
state => (),
)(register);

然後在元件中以props的方式拿到傳遞過來的redux狀態和方法，就可以呼叫ajax請求如下。

register = async () =>  = this.state;
//傳送ajax
console.log(laoban, password, repassword, username);
//呼叫容器元件傳遞的更新狀態的方法
this.props.register();
}

至此，乙個react專案中比較簡單的業務邏輯基本完成。整個專案中會出現各種問題和更優的寫法，所以此套邏輯適用於一般業務邏輯場景，具體問題需要接待對待。

react專案成型的個人心得

typedef個人心得

專案部署，版本迭代個人心得

寒假集訓個人心得

react專案成型的個人心得

typedef個人心得

專案部署，版本迭代個人心得

寒假集訓個人心得

相關推薦