redux筆記 高階

1 拆分ui元件和容器元件

return

(

value =

onchange =

/>

提交);}

export

對應的聰明元件：

render()  = this

.state
return
( 
inputvalue =
handleinputchange = 
submitdata = 
list =
deletelist = 
/>
); }

2 非同步請求可以放在元件中，如下所示：

componentdidmount())

}

但是不便於統一管理，使用redux-thunk 中介軟體，將其放在creact actionor中，首先安裝redux-thunk:

在store中定義：

import thunk from 'redux-thunk';

import reducer from './reducer';

const composeenhancers = window.__redux_devtools_extension_compose__ ||compose;

const store =createstore(reducer, composeenhancers(

));export

default store;

如上所示：既可以使用外掛程式也可以使用thunk；

不使用redux-thunk時，action只能是乙個物件，有了redux-thunk之後，action就可以是乙個函式了。

其中store/index.js檔案

import thunk from 'redux-thunk';

import reducer from './reducer';

const composeenhancers = window.__redux_devtools_extension_compose__ ||compose;

const store =createstore(reducer, composeenhancers(

));export

default store;

對應的actioncreator.js

import   from '@/store/actiontype.js'import * as api from '@/api';

import store from './index.js';
import axios from "axios";
export const changeinputvalue = (value)=>()
export const getlistdata = ()=>)，表示直接把物件renturn出去了
let response =await api.getdata();
store.dispatch()
}}

redux深入高階

閒話不多說，上 import thunk from redux thunk import rootreducer from reducers index create a store that has redux thunk middleware enabled thunk createstore ...

redux深入高階

閒話不多說，上 import thunk from redux thunk import rootreducer from reducers index create a store that has redux thunk middleware enabled thunk createstore ...

redux初學筆記

鏈結很多很全 內容簡單而系統 redux是個狀態管理的庫，web應用比較複雜時，需要管理各種複雜的狀態，這些狀態有可能是資料 來自於本地或者資料庫 也有可能來自於ui 單選框多選框的選擇之類的 這時就需要使用redux管理這些不斷變化的狀態，redux只著眼於狀態的維護和資料的管理，而不會理會檢視的...