redux學習總結

redux學習總結

redux學習總結

主要是學習完，爲了加深印象，整理的一些概念和總結，主要是參考阮大師的文章。

一些類包總結

• redux，redux本身的包，本身專有的功能。有createStore、applyMiddleware、combineReducers
• redux-actions, 與actions相關，handleActions（reducer使用）、createAction（action使用）
• react-redux，將react工程變成redux,連接使用。有provide、connect

redux、redux-actions類

store

• 全部的入口，整個應用只有一個store,在入口的index.jsx中經過<Provider store={store}>引入。由於provider,是連接react和redux的，全部import { Provider } from 'react-redux';
• 如何建立一個store？import {createStore,applyMiddleware} from 'redux'。createStore函數接受另外一個函數做爲參數，返回新生成的 Store 對象。
• store.dispatch()是 View 發出 Action 的惟一方法。
• store對象包含的數據，叫state,若是想獲得某個時點的數據，就要對 Store 生成快照。這種時點的數據集合，就叫作 State。

• dispactch，支持異步請求。

  import {createStore,applyMiddleware} from 'redux'
  import thunkMiddleware from 'redux-thunk'
  const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

  上面代碼使用redux-thunk中間件，改造store.dispatch，使得後者能夠接受函數做爲參數。
  所以，異步操做的第一種解決方案就是，寫出一個返回函數的 Action Creator，而後使用redux-thunk中間件改造store.dispatch。

action

• State 的變化，會致使 View 的變化。可是，用戶接觸不到 State，只能接觸到 View。因此，State 的變化必須是 View 致使的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。 Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。

• 建立一個action,簡化作法是createAction

  import { createAction } from 'redux-actions';
  import * as types from '../constants/ActionTypes';
  const test = createAction(types.TEST);

Reducer

Store 收到 Action 之後，必須給出一個新的 State，這樣 View 纔會發生變化。這種 State 的計算過程就叫作 Reducer。Reducer 是一個函數，它接受 Action 和當前 State 做爲參數，返回一個新的 State。

• reducer函數不能手工調用，store.dispatch方法會觸發 Reducer 的自動執行。爲此，Store 須要知道 Reducer 函數，作法就是在生成 Store 的時候，將 Reducer 傳入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);

createStore方法還能夠接受第二個參數，表示 State 的最初狀態。這一般是服務器給出的。

let store = createStore(reducer, window.STATE_FROM_SERVER)

上面代碼中，window.STATEFROMSERVER就是整個應用的狀態初始值。注意，若是提供了這個參數，它會覆蓋 Reducer 函數的默認初始值。

• state初始化值在reducer裏面設置。最好把 State 對象設成只讀。你無法改變它，要獲得新的 State，惟一辦法就是生成一個新對象。這樣的好處是，任什麼時候候，與某個 View 對應的 State 老是一個不變的對象。

function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一個數組
function reducer(state, action) {
  return [...state, newItem];
}

• reducer其實就是執行action,而後給出新的state。因而有handleActions 。能夠簡化處理。import { handleActions } from 'redux-actions';

import * as types from '../constants/ActionTypes';

const initialState = {
  };

export default handleActions({

  [types.SELECT_LUGGAGE] (state,action){

      return {
        ...state
    }

  },
  [types.SELECTED_LUGGAGE] (state,action){
    var index = action.payload;
     
    return {
      ...state
    }

  }
},initialState);

• reducer須要拆分，不一樣的函數負責處理不一樣屬性，最終把它們合併成一個大的 Reducer 便可。import { combineReducers } from 'redux';

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

上面的代碼經過combineReducers方法將三個子 Reducer 合併成一個大的函數。
這種寫法有一個前提，就是 State 的屬性名必須與子 Reducer 同名

react-redux類

組件

React-Redux 將全部組件分紅兩大類：UI 組件（presentational component）和容器組件（container component）。UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。
你可能會問，若是一個組件既有 UI 又有業務邏輯，那怎麼辦？回答是，將它拆分紅下面的結構：外面是一個容器組件，裏面包了一個UI 組件。前者負責與外部的通訊，將數據傳給後者，由後者渲染出視圖。
React-Redux 規定，全部的 UI 組件都由用戶提供，容器組件則是由 React-Redux 自動生成。也就是說，用戶負責視覺層，狀態管理則是所有交給它。

容器組件

React-Redux 提供connect方法，用於從 UI 組件生成容器組件。
~~~
import { connect } from 'react-redux'

const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) ~~~ 上面代碼中，connect方法接受兩個參數：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將state映射到 UI 組件的參數（props），後者負責輸出邏輯，即將用戶對 UI 組件的操做映射成 Action。