redux 個人整理

閱讀了redux的文件後，並參與了乙個練手專案r-music的部分開發後，通過自己的理解，整理了這篇文件。

初學，所以一定會有不詳或者錯誤的地方。

開發這個專案，我參閱的學習文件如下：

react-redux提供的provider元件，可以讓容器元件取得state。

src/index.js

import configurestore from './stores'
const store = configurestore()

上面**中，provider使得router的所有子元件可以取得state。

import configurestore from './stores'為redux的store，如下：

src/store/index.js

import reducers from '../reducers/index';
export default function(initialstate) else
let store = createstorewithmiddleware(reducers, initialstate);
return store;
};

src/containers/search.js

import react,  from 'react'
import from 'react-redux'
import from '../actions/search'
class search extends component 
componentdidmount() = this.props
dispatch(searchhotapi())
} searchevt(keyword,page=1) = this.props;
keyword = keyword || this.refs.keyword.value
if(keyword!='')else
this.refs.keyword.value = keyword;
} render() = this.props;
return (
//...)}}
function map(state) 
}export default connect(map)(search)

react-redux的connect方法，用於從 ui 元件生成容器元件。

上面**中，connect(map)(search)使得元件search可以通過props取得map返回的資料。

dispatch(searchhotapi())和dispatch(clearsearchresultapi())，獲取資料並分發action。

src/actions/search.js

import config from '../config'
import from './spin'
import api from '../api'
import storage from '../storage'
//定義常量
export const search_hot = 'search_hot'
export const search_result = 'search_result'
//actioncreator,這裡是乙個函式，返回action物件
const searchhot = (obj) => }
const searchresult = (obj) => }
//搜尋熱門關鍵字
export function searchhotapi() catch(error) }}
//通過關鍵字搜尋
export function searchresultapi(keyword,page) );
//搜尋歷史存到localstorage
setsearchhistory(keyword);
dispatch(searchresult(result.data.info));
} catch(error) 
}}

上面**中，searchhot和searchresult都是action creator，即分別返回乙個action。

action是乙個帶有type關鍵字的物件，如和。

searchhotapi和searchresultapi分別返回乙個獲取資料並分發action的非同步函式，一般在容器元件裡會呼叫。

src/reducer/search.js

import  from 'redux'
import from '../actions/search'
function hots(state = , action)
}function result(state = , action)
}const reducers = combinereducers()
export default reducers

在src/store/index.js中，開發環境下，引入了中介軟體redux-logger的createlogger，在瀏覽器console可以觀察到每次reducer的結果，如下：

src/reducer/index.js

import  from 'redux'
//...
import search from './search'
const reducers = combinereducers()
export default reducers

reducer 是乙個函式，它接受 action 和當前 state 作為引數，返回乙個新的 state，然後view發生變化。combinereducers將多個拆分的reducer合併。

redux基礎整理

設計和使用原則基本概念 1.store store 就是儲存資料的地方，相當於乙個容器，整個專案只能有乙個 store。redux 提供createstore這個函式，用來生成 store。import from redux const store createstore fn createsto...

PHP SAPI（FCGI）個人整理

php的cgi實現從cgi main.c檔案的main函式開始，在main函式中呼叫了定義在fastcgi.c檔案中的初始化，監聽等函式。對比tcp的流程，我們檢視php對tcp協議的實現，雖然php本身也實現了這些流程，但是在main函式中一些過程被封裝成乙個函式實現。對應tcp的操作流程，php...

JQ個人整理

jq選擇器基礎選擇器標籤名類名 id名層疊選擇器 a b a中所有的子孫b a b a中兒子b a b a緊跟在後面的兄弟 a b a後面所有的兄弟b 過濾選擇器 first 第乙個 last 最後乙個 not 非 even 偶數 odd 奇數 eq 2 等於多種過濾器組合時，在滿足第乙個...

redux 個人整理

redux基礎整理

PHP SAPI（FCGI）個人整理

JQ個人整理

相關推薦