基於React-redux的todolist的項目搭建和開發步驟

一、安裝步驟

(1)npm install -g create-react-app      全局安裝

(2)create-react-app reactproject       新建並對react項目進行命名(注:項目名稱不能有大寫)

(3)cd reactproject                             通過命令進入文件夾內部,準備運行項目

(4)npm start                                     運行項目

二、webpack相關配置

(1)npm run eject (可選)    如果要對webpack進行設置,可以使用命令 npm run eject把webpack文件暴露出來,操作是不可逆的

(2)安裝redux-saga

 是一個用於管理應用程序 Side Effect(副作用,例如異步獲取數據,訪問瀏覽器緩存等)的 library,它的目標是讓副作用管理更容易,執行更高效,測試更簡單,在處理故障時更容易。

(3)安裝react-redux

三、開發react-redux-todolist

(先實現功能開發,在理解學習原理和作用並做記錄)

(一)理解redux

1.Provider

Provider作用將store傳入整個應用

2.createStore()

存放單一數據源的store,由createStore創建

3.subscribe()

接收一個listener,它的作用是給store添加監聽函數

4.combineReducers()

把多個reducer函數合併成一個最終的reducer函數,然後可以對最終的reducer調用createStore()

combineReducers({todos,counter})將todos和counter兩個函數(reducer)合併成一個reducer.

5.dispatch()

將action發送給state

6.connect()

綁定 State 到 View

7.reducers

把 action 和 state 串起來,reducer 只是一個接收 state 和 action,並返回新的 state 的函數。

Reducers是如何處理action的

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

todoAPP就是定義的reducer ,接收兩個參數:state和action,然後基於type決定如何處理action。

8.action

Action 是用來描述 UI 層事件的一個對象。連接UI的變化,通過dispatch方法發送一個action。

是一個擁有 type 屬性的對象,用來描述發生了什麼,然後按 type 決定如何處理 action。

獲取數據是一個 action,一個點擊是一個 action,一個 input 變化也是一個 action 等。

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

9.Object.asign(目標對象,源對象)

方法用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

(1)複製一個對象

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

(2)合併具有相同屬性的對象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

屬性被後續參數中具有相同屬性的其他對象覆蓋。 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章