redux 個人整理

2021-09-07 11:08:23 字數 3260 閱讀 6289

閱讀了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 等於 多種過濾器組合時，在滿足第乙個...